webpack优化

首先可以使用speed-measure-webpack-plugin 插件测量各个插件和loader使用前后所花费的时间

const smp = new SpeedMeasurePlugin()
configureWebpack: smp.wrap({})

1、对于一些静态资源进行cdn加载

vue.config.js

externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'vuex':'Vuex'
}

pages.js

const glob = require('glob');
const pages = {};
const titleObj = {
  client: '',
  backend: ''
};
const cdn = {
  js: [
    'https://unpkg.com/vue@2.6.11/dist/vue.min.js',
    'https://unpkg.com/vue-router@3.1.6/dist/vue-router.min.js',
    'https://unpkg.com/vuex@3.1.3/dist/vuex.min.js'
  ]
};

module.exports.pages = function() {
  glob.sync('./src/pages/*/main.js').forEach(filepath => {
    const fileList = filepath.split('/');
    const fileName = fileList[fileList.length - 2];
    pages[fileName] = {
      entry: `src/pages/${fileName}/main.js`,
      template:
        process.env.NODE_ENV === 'production'
          ? './public/index.html'
          : `./public/html/${fileName}.html`,
      filename: 'index.html',
      title: titleObj[fileName],
      chunks: ['chunk-vendors', 'chunk-common', fileName],
      cdn: fileName === 'client' ? cdn : []
    };
  });
  return pages;
};

html

<% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
    <script
      type="text/javascript"
      src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
    ></script>
<% } %>

然后通过标签方式引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

2、使用uglifyjs-webpack-plugin压缩js、去除console、开启缓存、并行编译等

            new UglifyJsPlugin({
              uglifyOptions: {
                warnings: false,
                compress: {
                  drop_debugger: true,
                  drop_console: true
                },
                output: {
                  comments: false
                }
              },
              cache: true,
              parallel: true
            })

            or

configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {                                  
   config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
   config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
   config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
   config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
  }
}

3、使用compression-webpack-plugin开启gzip压缩

            const CompressionWebpackPlugin = require('compression-webpack-plugin')
            const productionGzipExtensions = ['js', 'css']
            new CompressionWebpackPlugin({
              test: new RegExp(
                '\\.(' + productionGzipExtensions.join('|') + ')$'
              ),
              algorithm: 'gzip',
              threshold: 10240,
              minRatio: 0.8
            })

4、使用happypack加快打包速度

它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

module: {
        rules: [
            {
                test: /\.js[x]?$/,
                use: 'Happypack/loader?id=js',
                include: [path.resolve(__dirname, 'src')]
            },
            {
                test: /\.css$/,
                use: 'Happypack/loader?id=css',
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules', 'bootstrap', 'dist')
                ]
            }
        ]
    },
    plugins: [
        new Happypack({
            id: 'js', //和rule中的id=js对应
            //将之前 rule 中的 loader 在此配置
            use: ['babel-loader'] //必须是数组
        }),
        new Happypack({
            id: 'css',//和rule中的id=css对应
            use: ['style-loader', 'css-loader','postcss-loader'],
        })
    ]

5、使用image-webpack-loader压缩图片

        config.module
          .rule('images')
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({
            bypassOnDebug: true
          })
          .end()

6、使用全局变量区分开发和生产环境

process.env.NODE_ENV === 'development' ? 本地 : 开发

cross-env 增加变量

"scripts": {
    "serve-client": "cross-env page=client vue-cli-service serve --mode 
  development",
    "serve-backend": "cross-env page=backend vue-cli-service serve --mode 
  development",
    "build-client": "cross-env page=client VUE_APP_Version=1.0.0 vue-cli-service 
  build --mode production",
    "build-backend": "cross-env page=backend VUE_APP_Version=1.0.0 vue-cli-service 
  build --mode production"
},

7、配置热更新

    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].chunksSortMode = 'none';
            return args;
        });
    }

8、resolve.extensions配置

resolve: {
      extensions: ['.js', '.vue', '.json', '.ts']
},

频率最高的放在前面，不存在的不要写进去

9、使用postcss将px转化为rem

loaderOptions: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 100, // 换算的基数
          selectorBlackList: ['no-rem'],
          propList: ['*']
        })
      ]
    }
  }

10、cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下

将其放到其他loader之前即可

rules: [
            {
                test: /\.jsx?$/,
                use: ['cache-loader','babel-loader']
            }
        ]

11、thread-loader

thread-loader 放置在其它 loader 之前，那么放置在这个 loader 之后的 loader 就会在一个单独的 worker 池中运行。

rules: [
            {
                test: /\.jsx?$/,
                use: ['thread-loader', 'cache-loader', 'babel-loader']
            }
        ]

12、HardSourceWebpackPlugin

HardSourceWebpackPlugin 为模块提供中间缓存，缓存默认的存放路径是: node_modules/.cache/hard-source。

配置 hard-source-webpack-plugin，首次构建时间没有太大变化，但是第二次开始，构建时间大约可以节约 80%。

plugins: [
        new HardSourceWebpackPlugin()
    ]

13、noParse

如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块，这样 Webpack 会引入这些模块，但是不进行转化和解析，从而提升 Webpack 的构建性能 ，例如：jquery 、lodash。

module: {
        noParse: /jquery|lodash/
    }