[TOC] >[success] # 并行壓縮 ~~~ 1.Webpack 4 中內置了 TerserWebpackPlugin 作為默認的 JS 壓縮工具，之前的版本則需要在項目 配置中單獨引入，早期主要使用的是 UglifyJSWebpackPlugin ~~~ ~~~ 1.'terser-webpack-plugin'：js 代碼壓縮，支持壓縮 ES6 2.還可以用他去除console.log。 3.使用： const TerserPlugin = require('terser-webpack-plugin') // 壓縮js代碼 module.exports?=?{ ... optimization: { minimizer: [ new TerserPlugin({ parallel: true, // 開啟幾個進程來處理壓縮，默認是 os.cpus().length - 1 ，不填使用默認挺好 cache: true, // 是否緩存 （緩存開啟后下次編譯速度飛快） sourceMap: false, }), ] } } ~~~ [terser-webpack-plugin](https://www.npmjs.com/package/terser-webpack-plugin) >[success] # 關于緩存 ~~~ 1.緩存會幫助我們提升二次構建的速度，就是說當第一次時候沒啥用，第二次構建體驗越明顯，緩存文件 內容都在'node_modules'文件下'.cache' 會記錄我們的緩存文件信息。這里后續查一下如何定期清理緩存方案 2.可以緩存幾個方案 2.1.babel-loader 開啟緩存 2.2.terser-webpack-plugin 開啟緩存 參考上面的開啟cache字段即可 2.3.使用 cache-loader 或者 hard-source-webpack-plugin ~~~ >[danger] ##### babel-loader 緩存 ~~~ 1.因為babel-loader在解析轉換上耗時太長，所以我們希望能緩存每次執行的結果。 webpack的loader中剛好有 cacheDirectory 的選項，默認為false 開啟后將使用緩存的執行結果 ~~~ ~~~ module.exports = { ... { rules: [{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader?cacheDirectory=true'] // 開啟緩存設置babel-loader?cacheDirectory=true } ] }, } ~~~ >[danger] ##### hard-source-webpack-plugin ~~~ 1.從vue-cli和create-react-app中可以知道并沒有實用dll，是因為： Webpack 4 的打包性能足夠好的，dll繼續維護的必要了。更好的代替者DLL， 選擇hard-source-webpack-plugin ~~~ ~~~ const hardSourcePlugin = require('hard-source-webpack-plugin'); moudle.exports = { // ... plugins: [ new hardSourcePlugin() ], // ... } ~~~ >[danger] ##### cache-loader 參考 [https://www.cnblogs.com/qilj/p/12447464.html](https://www.cnblogs.com/qilj/p/12447464.html) [https://blog.csdn.net/weixin\_38655450/article/details/107821213](https://blog.csdn.net/weixin_38655450/article/details/107821213) * 更多配置（直接參考下面連接） ~~~ const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') new HardSourceWebpackPlugin({ // cacheDirectory是在高速緩存寫入。默認情況下，將緩存存儲在node_modules下的目錄中，因此如 // 果清除了node_modules，則緩存也是如此 cacheDirectory: 'node_modules/.cache/hard-source/[confighash]', // Either an absolute path or relative to webpack's options.context. // Sets webpack's recordsPath if not already set. recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json', // configHash在啟動webpack實例時轉換webpack配置，并用于cacheDirectory為不同的webpack配 // 置構建不同的緩存 configHash: function(webpackConfig) { // node-object-hash on npm can be used to build this. return require('node-object-hash')({sort: false}).hash(webpackConfig); }, // 當加載器，插件，其他構建時腳本或其他動態依賴項發生更改時，hard-source需要替換緩存以確保輸 // 出正確。environmentHash被用來確定這一點。如果散列與先前的構建不同，則將使用新的緩存 environmentHash: { root: process.cwd(), directories: [], files: ['package-lock.json', 'yarn.lock'], }, }) ~~~ [hard-source-webpack-plugin](https://www.npmjs.com/package/hard-source-webpack-plugin) > [danger] ##### 對于css 緩存 ~~~ 1.最新發布的 CSSMinimizerWebpackPlugin 支持且默認開啟緩存，其他的插件如 OptimizeCSSAssetsPlugin 和 OptimizeCSSNanoPlugin 目前還不支持使用緩存，可以嘗試使用'CSSMinimizerWebpackPlugin'來替換 OptimizeCssAssetsPlugin 壓縮 CSS ~~~ >[success] # 縮小構建目標 [后續看的先看這個了解大概](https://blog.csdn.net/weixin_38655450/article/details/107821213) >[success] # 擦除沒有使用到的css ~~~ 1.purgecss-webpack-plugin 可以將代碼中沒有使用到的css 刪除掉，一定需要和mini-css-extract-plugin 配合使用 ~~~ [purgecss-webpack-plugin](https://github.com/FullHuman/purgecss/tree/master/packages/purgecss-webpack-plugin) >[success] # 壓縮圖片 ~~~ 1.npm install image-webpack-loader --save-dev 2.但是我使用失敗了我哭了 ~~~ [image-webpack-loader](https://www.npmjs.com/package/image-webpack-loader) >[success] # polyfill-service ~~~ 1.根據瀏覽器缺失哪些特性來補全哪些特性，它能夠根據瀏覽器的UA來判斷當前瀏覽器缺失哪些特性， 進而進行補強,問題是有些瀏覽器修改了UA，所以部分情況也會有問題 ~~~ >[danger] # 關于更多的優化速度好文章 [https://juejin.im/post/6844904071736852487](https://juejin.im/post/6844904071736852487) [https://www.cnblogs.com/rock-roll/p/12093553.html](https://www.cnblogs.com/rock-roll/p/12093553.html) [https://zhuanlan.zhihu.com/p/50851312](https://zhuanlan.zhihu.com/p/50851312)