web 前端性能优化

一、webpack优化

1. 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'); 
     

待续.....