webPack 代码优化

eslint.js(二选一)

• npm install eslint eslint-loader -D (检验代码规范)
• npx eslint —init (初始化 eslint 配置文件 )

rules:[
           {
               test: /\.js$/,
               use:'eslint-loader',
               enforce: 'pre'
           },
]

sourceMap (代码排查，调试错误)

• 开发环境使用： cheap-module-eval-source-map
• 生产环境使用： cheap-module-source-map

Tree-shaking & scopeHosting (生产环境)

• 在 package 文件中设置 “sideEffects”: “false”, 把副作用的数据删除掉
• “sideEffects”: [“*/.css”], 去除 css 文件

[ scopeHosting ] (自带)减少作用域

热更新

devServer: {
        port: 8081,
        open: true,
        compress: true,
        hot: true,  // 热更新 仅更新更改的代码 局部刷新 减少数据请求数量 
    },
    //  webpack css 强制热更新插件
        new webpack.HotModuleReplacementPlugin(),
    let op = document.createElement('p');
op.innerHTML = plus(10,5);
document.body.appendChild(op)
    // js 代码的热更新
    if(module.hot) {
        module.hot.accept('./test',()=>{
            let plus = require('./test').default;
            op.innerHTML = plus(20,5);
        })
    }

注：当把 css 文件分离出后 热更新只执行一次 后续失效

懒加载（动态加载模块）

• webpackPrefetch 利用浏览器空闲时间，把动态模块加载完成并引入 前提：主要模块加载完成后
• webpackPreload 预加载 和主模块加载同时进行加载，不会引入
• webpackChunkName 文件名字

output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        // 动态模块名字  name 代表 01234
        chunkFilename:'[name].min.js'
    },
 import(/*webpackPrefetch:true*/'./test').then(({default:m})=>{
        op.innerHTML = m(20,50)
    });

打包文件分析工具 （生产环境）

• npm install webpack-bundle-analyzer

optimization.splitChunks

optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin()
        ],
        splitChunks: {
            chunks: 'all',  // 同异步  all 所有
            minSize: 30000,  // 至少 30 kb 才去抽离
            maxSize: 0,
            minChunks: 1,  // 至少抽离第三方模块 1 个
            maxAsyncRequests: 6,  // 引入模块异步请求次数
            maxInitialRequests: 4, // 首屏加载的请求次数
            automaticNameDelimiter: '~', // 文件之间的连接符
            automaticNameMaxLength: 30,
            cacheGroups: { // 缓存组， 可以设置一些规则
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10  // 优先级 
              },
              default: {
                minChunks: 2,
                priority: -20, // 优先级 
                reuseExistingChunk: true
              }
            }
          }
        },

resolve 解析

• extensions 添加扩展名进行匹配
• alias 设置别名

resolve: {
        extensions: ['.js', '.jsx', '.json', '.css', '.ts', '.tsx', '.vue'],
        alias:{
            '@':path.resolve(__dirname,'src'),
            'test': path.resolve(__dirname,'src/test')
        }
    }

happypack

• npm install happypack -D (多线程打包，把不同的逻辑交给不同的线程处理)

根据 mode 分离配置环境

• webpack.base.js 公共配置
• webpack.dev.js 开发环境配置
• webpack.prod.js 生产环境配置
• package.json 文件的 scripts 属性中配置执行命令
  • 开发环境打包: “dev”: “webpack —env.development —config./webpack.base.js”,
  • 生产环境打包:”build”: “webpack —env.production —config./webpack.base.js”,
  • 服务器： “dev-s”: “webpack-dev-server —env.development —config./webpack.base.js”
• npm install webpack-merge

图片压缩

• npm install image-webpack-loader -D

{
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                  'file-loader',
                  {
                    loader: 'image-webpack-loader',
                    options: {
                      mozjpeg: {
                        progressive: true,
                        quality: 65 // 图片品质
                      },
                      // optipng.enabled: false will disable optipng
                      optipng: {
                        enabled: false,
                      },
                      pngquant: {
                        quality: [0.65, 0.90],
                        speed: 4
                      },
                      gifsicle: {
                        interlaced: false,
                      },
                      // the webp option will enable WEBP
                      webp: {
                        quality: 75
                      }
                    }
                  },
                ],
              }