vue-cli2 构建速度优化

发布时间：2020-12-16 23:29:46 所属栏目：百科来源：网络整理

导读：对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译

对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译。

网上流传 vue-cli 一些优化配置，有些在新版本的 vue-cli 和 webpack3 已经不再需要了，有些是针对 webpack4 的。对于新版本的 vue-cli 和 webpack3，以下简单配置优化后，即可大幅提升构建速度。

1、按需引用及动态路由2、启用 uglifyjs-webpack-plugin 缓存3、关闭 source-map4、利用 DllPlugin 和 DllReferencePlugin 提取公用库

一、动态路由1、修改 src/router/index.js

import Vue from 'vue' import Router from 'vue-router' const Menu = () => import( '@/pages/menu/index.vue' export path: '/' name: 'Menu' })

2、配置 .babelrc（可选）

"comments": , "plugins": ["transform-vue-jsx","transform-runtime" }

3、修改 build/webpack.prod.conf.js

filename: utils.assetsPath('js/[name].[chunkhash].js' chunkFilename: utils.assetsPath('js/[name].js') },

二、启用 uglifyjs-webpack-plugin 缓存

parallel: , cache: }),

三、关闭 source-map

修改 src/config/index.js 中 productionSourceMap 值

productionSourceMap:

四、公用库提取

1、安装 clean-webpack-plugin add-asset-html-webpack-plugin

yarn add clean-webpack-plugin add-asset-html-webpack-plugin@2.1.0 --dev

2、build 目录下创建 webpack.dll.conf.js

const webpack = require('webpack' const path = require('path' const CleanWebpackPlugin = require('clean-webpack-plugin' const dllPath = path.resolve(__dirname,'../src/assets/dll') process.env.NODE_ENV = 'production' module.exports = entry: { vue: ['babel-polyfill','vue','vue-router','vuex','axios','element-ui' filename: '[name]-[hash].dll.js', library: '_dll_[name]' CleanWebpackPlugin(['*.js'],{ 'process.env' NODE_ENV: JSON.stringify(process.env.NODE_ENV) name: '_dll_[name]', path: path.join(__dirname,'./','[name].dll.manifest.json' warnings: pure_funcs: ['console.log' sourceMap: }

3、在 package.json 中新增 dll 构建命令

"scripts" "dll": "webpack --config build/webpack.dll.conf.js" },

4、修改 build/webpack.prod.conf.js

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin' manifest: require('./vue.dll.manifest.json' filepath: path.resolve(__dirname,'../src/assets/dll/*.js'), publicPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), outputPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), includeSourcemap: ]

五、编译

yarn run dll

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!