プロジェクト

全般

プロフィール

Vote #81519

未完了

Use webpack to improve javascripts and stylesheets management

Admin Redmine さんが約2年前に追加.

ステータス:
New
優先度:
通常
担当者:
-
カテゴリ:
-
対象バージョン:
-
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
0
version_id:
0
issue_org_id:
35536
author_id:
486714
assigned_to_id:
0
comments:
4
status_id:
1
tracker_id:
3
plus1:
0
affected_version:
closed_on:
affected_version_id:
ステータス-->[New]

説明

I propose the use of webpack as a library management tool for javascript. I also suggest the use of "simpacker":https://github.com/hokaccha/simpacker as a tool for linking rails and webpack.

The docker environment can be found here.

https://github.com/tohosaku/redmine-docker-wsl2

h2. Motivation

  • To deal with the problem that #6662 "js files are not compressed"
  • To be a foundation for future npm package usage.

journals

I'm going to post a few suggestions, since it seems that posts can't be too long.

h2. Benefits

h3. For users.

* webpack automatically minifies javascript and CSS.
* reduces the number of HTTP accesses by bundling files.

* However, I do not know if there will be any visible performance improvement at this time.

h3. For developers.

* Managing javascript as a module makes it easier to get help from editors and lint tools.
* webpack makes it easier to keep track of versions of javascript packages since we don't have to commit them directly to the repository.
* webpack-dev-server will support automatic reload for javascript modification during development.
* Image files in CSS have hash query string(for more accurate cache control).

--------------------------------------------------------------------------------
h2. Questions that may be asked

* The default for Rails6 is webpacker. Why use simpacker instead of webpacker?

* webpacker may help develop new rails apps, but it doesn't seem suitable for cases like Redmine where there is a lot of existing javascript that needs to migrate. I think it is more appropriate to use simpacker.

* I believe it is appropriate to use simpacker because it is a thin wrapper and does not make administration overly complicated.
* webpack was released ver5 last year, and it includes commonly used plugins and loaders, and there is also extensive documentation on the official website. it is faster to use the simpacker to control the webpack more directly.

* This is a tool developed by an engineer of "cookpad":https://www.cookpadteam.com/ , the most famous rails user company in Japan. I hope this will be a good opportunity for you to get interested in it.

* Do all Redmine users have to install nodejs and yarn in addition to ruby?

* No, only developers must install nodejs and yarn, and we expect to include precompiled javascript and CSS for users who install Redmine with zip, tar.gz, or other archives.
* The process of compiling javascript must be interrupted at release time.

* Doesn't having javascript and CSS in one package degrade performance? Will it degrade performance to have javascript and CSS in one place, or will it make users download files they may not use?

* webpack can split the output into multiple files instead of a single file. This patch follows the current javascript loading order. Instead of having a single file for all files, it generates a file for each location where the helper is currently loading javascript.
* webpack is a tool to organize js into chunks, but language files of the jstoolbar, datepicker can be separated into different files instead of combined into one so that extra files are not loaded.

* If you use the npm module, the jquery will not be visible on the plugin side?

* "expose-loader" exposes jquery, tributejs, etc. globally. It seems that there is no effect on plugins that expects Redmine to load jquery.
* "rails-ujs" also expects that jquery is published globally (if not, jquery doesn't add CSRF protection functionality), but it works fine after patching.

* How does it affect the plugin and theme?

* For compatibility with existing plugins and themes, the output path of compiled javascript and CSS is almost the same as the previous path.
* simpacker has its helper (javascript_pack_tag, etc.), but we will use existing helpers because Redmine extends helpers for plugin and theme.
* The following plugins have been installed and tested. I changed some of the file names used in javascript_include_tag, so we will need to modify that part.

* UI Extension

* The filename of "chartjs" has been changed, so it needs some modifications.

* Issues Panel
* Issue Templates

* Is it reasonable to use webpack as a bundle management tool?

* rails use webpack.
* Others such as "Parcel" , "Vite" , "Rome" , etc.

* "vite" has a generous rails integration (https://github.com/ElMassimo/vite_ruby) feature, but it doesn't support jquery. (jquery needs a patch).

h2. Roadmap

* Passing through loader to convert CSS and Javascript that doesn't work in some browsers, and to write SCSS (using loader such as babel).
* Use of unit testing tools such as mocha and npm packages such as eslint and prettier
* Separate public and private functions by modularizing javascript.

* Currently, all functions in application.js are public.
* Initially, all functions will be made public as before. After some refactoring, we may remove codes considered to be unnecessary to publish from export.

* I would like to introduce a "stimulus":https://github.com/hotwired/stimulus . Currently, Redmine code has many javascript code fragments. But with stimulusjs, it will be easier to extract them.

* Modify the ".js.erb" to pure javascript. (The amount is huge and pending this time)

* If we can extract the javascript codes in the ".erb" files, we can get help from editors and lint tools (migrate from old notation, remove browser support that is no longer needed).

* DOM traversal will be less frequent, so dependency on jquery will naturally decrease (but I don't want to de-jquery).
* Helper methods such as link_to_function deprecated in rails, have some fragments of javascript code. I want to extract them into a javascript module.

h2. Note

* When webpack compiles CSS by itself (called setting it to entry point) instead of accompanying javascript, it outputs unwanted javascript files. There is a plugin that removes unneeded javascripts. But it is not considered to be harmful, so I will not take any action.
* Simpacker refers to the manifest.json generated by webpack to get the information of various assets. During development, if manifest.json is missing even after starting Redmine, an exception will occur.
* All developers need to install nodejs.

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
I’m interested in improving the way in which we manage now the assets, but from what I have read, Rails 7 offers an alternative to webpack, let’s discuss this when we do the update.
--------------------------------------------------------------------------------


related_issues

relates,New,36320,Migrate to Rails 7

表示するデータがありません

他の形式にエクスポート: Atom PDF

いいね!0