一、webpack优化
-
js 代码分割，设置未变动代码文件的 hash 值不变
-
将不在开发中不会变动的代码，单独打包出来，比如
node_modules内的插件// 入口文件main.js import _ from 'lodash' console.log(_.join([1, 2, 3, 4], '——'));// webpack的配置 splitChunks: { chunks: "async", // 打包模块的引入类型 async:异步引入 initial:同步引入 all:上面两者 minSize: 30000, // 最小大小的文件会被 代码分割 minChunks: 1, // 打包出来的js文件(chunk)中有多少chunk引用 就被分割打包，这里代表一个打包出来的chunk就被代码分割 maxAsyncRequests: 5, // 最大异步引入个数 超出个数的不被分割 maxInitialRequests: 3, // 最大同步引入个数 超出个数的不被分割 automaticNameDelimiter: '~', // 组装名字中间的间隔符 下面cacheGroups 就被打包成 vendors~lodash.js name: true, // 允许自定义分割打包出来的名称 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 正则匹配 priority: -10, // 权重 如果比default中的priority大先执行这个 小的话先执行default里面的 }, default: { minChunks: 2, // 打包出来的js文件(chunk)中有多少chunk引用 就被分割打包，这里代表2个打包出来的chunk就被代码分割 priority: -20, // 权重 reuseExistingChunk: true // 代码中如果引入 a模块 a模块依赖 b模块 。如果我们在代码中都使用了a和b 在分割打包的时候，如果会将 a 和 b模块在vendors打包了 ，当在引入b模块的时候，reuseExistingChunk: true 就不需要default重新分割打包了 } } }// webpack 出口配置 contenthash：这个是代码不发生变化的时候，hash值不变 output: { filename: '[name]_[contenthash].js', path: path.join(__dirname, 'dist') } -
js 代码分割，预取/预加载模块(prefetch/preload module)
import(/* webpackPrefetch: true */ 'LoginModal'); // 在所有代码加载完之后，执行异步异加载 import(/* webpackPreload: true */ 'ChartingLibrary');
-
待续.....
