vue-cli项目打包优化

vue-cli项目升级

1. 升级全局vue-cli版本
2. npm install -g @vue/cli
3. 在项目目录下执行 vue upgrade
4. 根据提示删除掉webpack中不使用的api

使用webpack的DllPlugin和DllReferencePlugin进行优化

1. 使用webapck.DllPlugin提前打包依赖包，避免每次构建时都需要重新打包一遍依赖。
2. 使用DllReferencePlugin关联打包后的依赖，告诉webpack哪些依赖不需要重复打包。
3. 通常是第三方依赖或者不会频繁改动的文件才会打包成Dll

1. 配置DllPlugin打包依赖

const webpack = require('webpack')
const path = require('path')
console.log('dll runing')
module.exports = {
    mode: 'production',
    //配置入口文件。文件入口-文件依赖
    entry: {
        vue_vendor:['vue', 'vue-filter', 'vue-i18n','vue-router', 'vuedraggable', 'vuex', 'vuex-persist', 'vxe-table','tree-table-vue'],
        ui:['element-ui','iview-area','view-design'],
        utils: ['xlsx','xe-utils','wangeditor','sortablejs','simplemde','dayjs','cropperjs','countup','codemirror','clipboard','moment','lodash'],
        echarts: ['echarts'],
        core: ['core-js']
    },
    //文件输出配置
    output: {
        // 打包出来的文件名
        filename: '[name]/[name].dll.js',
        // 文件存放的路径
        path: path.resolve(__dirname, '../dll'),
        // 对外的文件名引用名，要与DllPlugin中的name保持一致
        library: '[name]_[fullhash:8]'
    },
    plugins:[
        new webpack.DllPlugin({
            //生成的根目录
            context: process.cwd(),
            //引用的文件名，需要与output中的library一致。该文件名会在manifest关联
            name: '[name]_[fullhash:8]',
            //生成的manifest文件路径名称
            path: path.join(__dirname,'../dll/[name]/[name].manifest.json')
        })
    ]
}

2. package.json中添加打包命令

//运行打包 dll
"scripts": {
    "build:dll": "webpack --config ./build/webpack.dll.config.js",
  },

3. vue-config.js中关联mainfest.json

//webpack插件，将打包后的dll.js文件自动搬运到dist目录下，并自动在html中引用
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
  ....
  configureWebpack:(config) => {
    setDllConfig(config)
  }
}
function setDllConfig (config) {
  const dllReferencePlugin = [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vue_vendor/vue_vendor.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dll/ui/ui.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dll/utils/utils.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dll/core/core.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dll/echarts/echarts.manifest.json')
    })
  ]
  const addDllScriptPlugin = [
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve('./dll/vue_vendor/vue_vendor.dll.js')
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve('./dll/ui/ui.dll.js')
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve('./dll/utils/utils.dll.js')
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve('./dll/core/core.dll.js')
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve('./dll/echarts/echarts.dll.js')
    })
  ]
  config.plugins = [...config.plugins, ...dllReferencePlugin, ...addDllScriptPlugin]
}

4. 配置前后速度对比

Dll 优化前 72秒

Dll 优化后 速度47秒

配置缓存

module.exports = {
  ....
	config.cache = {
        type: 'filesystem',
        cacheLocation: resolve('./node_modules/.temp-cache')
    }
}

配置缓存后速度 7.66秒

参考配置

webpack.js.org/configurati…