📄Webpack 性能优化
type
status
date
slug
summary
tags
category
icon
password
Status
- 减少入口文件大小： 将入口文件拆分为多个较小的模块，使用动态导入（dynamic imports）按需加载，减少初始加载的文件大小。
- 懒加载与预加载： 懒加载（Dynamic Import）功能（import函数加webpack chunkname注释），按需加载非关键性资源；同时可以使用预加载（webpack prefetch）机制提前加载关键资源。
- 代码分割（Code Splitting）： 通过配置Webpack的代码分割功能，将项目代码分割成多个块（chunks），并且在需要的时候按需加载。
- Tree Shaking： 通过配置Webpack的Tree Shaking功能，只保留项目中实际使用到的代码，剔除未使用的代码，减少打包后的文件大小。（开启ES6，开生产模式）
- dll：把三方库单独做打包，区别于node_modules打成chunk，只要第三方库没有改变，dll文件只用执行一次就好，减少了重复打包的次数，提高构建速度。（dll 将所有库进行单独打包成不同的chunk，更加有利于我们的性能优化，提高构建速度。）
- 通过设置
webpack.DllReferencePlugin告诉 webpack 哪些库不用打包了 - 通过
add-asset-html-webpack-plugin插件实现打包的时候自动的将资源引入到html文件里面 - 执行 webpack 命令，会默认的执行
webpack.config.js里面的东西，要执行webpack.dll.js文件需要执行：webpack --config webpack.dll.js
- 优化加载速度：
- 使用 Webpack 的插件如 MiniCssExtractPlugin 来提取CSS代码（针对一个chunk的css，且在index.html是作为link引入）
- 使用babel-loader的缓存机制（babel-loader的options设置中增加
cacheDirectory属性，属性值为true，针对三个值source、options、identifier（@babel/core版本））等，以减少构建时间和加载时间。（webpack自身也有缓存）
- 并行构建： 使用 thread-loader 或 happypack 插件将任务分发给多个子进程并行处理，提高构建速度。
- 优化文件体积： 使用压缩插件如terser-webpack-plugin来压缩JavaScript代码，使用cssnano等工具压缩CSS代码，减小文件体积。
- 优化图片资源： 对于图片资源，可以使用Webpack的url-loader或file-loader来压缩和处理图片，并根据需要进行懒加载或响应式加载。
- 配置合理的模块解析规则： 通过配置externals选项把依赖上cdn在模板引入。
- Twikoo