webpack -- 项目优化 · 前端工程化学习笔记

[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)