Webpack 打包优化

现在全新的项目比较少了，大部分是在原有项目上面新增需求。收到一个小需求，本身需求不难。这项目是把后端操作系统和H5手机端展示页做在一起的，打包入口文件只有一个，最后打包的时发现打包后的包体积比我想象中大太多了，H5部分还是需要在手机端展示。就有了后续……

Analyze 分析

vue-cli自带分析，直接script开启： "analyze": "npm_config_report=true npm run build"

分析文件
分析文件

static/js/vendor.0b9fa55c7048684aba81.js (1.18 MB)
static/js/app.c3251a9bef8c1924ea86.js (853.75 KB)

router 按需加载

原来这样的写法：import Home from '@/pages/home'
改成：const Home = () => import('@/pages/home')

1553067494614.jpg

添加SplitChunksPlugin

webpack 3 to webpack 4

餐卡：To v4 from v3
参考：html-webpack-plugin，
参考：vue-loader升级15
参考： webpack3.x升级webpack4

• 更新 webpack 到 4.28.3 版本
• 更新 webpack-dev-server 到 3.1.14版本
• 更新 vue-loader 到 15.7.0版本
• 更新 html-webpack-plugin 到 3.2.0 版本
• 添加 webpack-cli 版本 3.2.1
• 添加 mini-css-extract-plugin 版本 0.5.0

webpack.dev.conf 修改

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
  // 开发环境引入
  mode: 'development',
  ...
  module: {
    ...
  }
  plugins: {
    ...
    new VueLoaderPlugin()
    ...
  }
  devServer: {
    ...
  }

接着, 以下插件被废弃掉了

• webpack.DefinePlugin
• webpack.NamedModulesPlugin
• webpack.NoEmitOnErrorsPlugin

utils.js 修改

现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader，需要更换成mini-css-extract-plugin

...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
...
// 找到:
// return ExtractTextPlugin.extract({
//   use: loaders,
//   fallback: "vue-style-loader",
//   publicPath: '../../'
// });
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)

webpack.prod.conf.js 修改

vue-loader 升级了对应也要升级
extract-text-webpack-plugin 更换成 uglifyjs-webpack-plugin
要在配置表里添加optimization选项

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
output: { ...},
// 这里添加
optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },
  // 这里添加
  plugins: [
  ...
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
  ...
]  

升级后

由于后台操作系统和H5是写在一项目里面，所以需要多做一步。

多个入口\出口

• 拆成多入口打包
• 看到ueditor这个插件时，这个富文本是非常大的，打包H5可以排除掉
• 框架用了两个：element-ui（PC端）、mint-ui（手机端），分入口打包