vue-cli2 构建速度优化
2019-01-08 08:23:27来源：博客园 阅读 ()
对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译。
网上流传 vue-cli 一些优化配置，有些在新版本的 vue-cli 和 webpack3 已经不再需要了，有些是针对 webpack4 的。对于新版本的 vue-cli 和 webpack3，以下简单配置优化后，即可大幅提升构建速度。
1、按需引用及动态路由
2、启用 uglifyjs-webpack-plugin 缓存
3、关闭 source-map
4、利用 DllPlugin 和 DllReferencePlugin 提取公用库
一、动态路由
1、修改 src/router/index.js
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 // webpackChunkName 打包后的文件名 5 const Menu = () => import(/* webpackChunkName: 'Menu' */ '@/pages/menu/index.vue') 6 7 export default new Router({ 8 routes: [ 9 { 10 path: '/', 11 name: 'Menu', 12 component: Menu 13 } 14 ] 15 })
2、配置 .babelrc（可选）
1 { 2 ... 3 "comments": true, // 输出编译信息 4 "plugins": ["transform-vue-jsx", "transform-runtime"] 5 }
3、修改 build/webpack.prod.conf.js
1 output: { 2 path: config.build.assetsRoot, 3 filename: utils.assetsPath('js/[name].[chunkhash].js'), 4 chunkFilename: utils.assetsPath('js/[name].js') // 使用webpackChunkName定义的文件名 5 },
二、启用 uglifyjs-webpack-plugin 缓存
1 new UglifyJsPlugin({ 2 parallel: true, // 并行 3 cache: true // 缓存 4 }),
三、关闭 source-map
修改 src/config/index.js 中 productionSourceMap 值
productionSourceMap:false
四、公用库提取
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
1 const webpack = require('webpack') 2 const path = require('path') 3 const CleanWebpackPlugin = require('clean-webpack-plugin') 4 const dllPath = path.resolve(__dirname, '../src/assets/dll') // dll文件存放的目录 5 6 process.env.NODE_ENV = 'production' // NODE_ENV 设置为 production 减少依赖 7 8 module.exports = { 9 entry: { // 把 vue 相关模块的放到一个单独的动态链接库 10 vue: ['babel-polyfill', 'vue', 'vue-router', 'vuex', 'axios', 'element-ui'] 11 }, 12 output: { 13 filename: '[name]-[hash].dll.js', // 生成vue.dll.js 14 path: dllPath, 15 library: '_dll_[name]' 16 }, 17 plugins: [ 18 new CleanWebpackPlugin(['*.js'], { // 清除之前的dll文件 19 root: dllPath 20 }), 21 new webpack.DefinePlugin({ 22 'process.env': { 23 NODE_ENV: JSON.stringify(process.env.NODE_ENV) // 设置环境变量 24 } 25 }), 26 new webpack.DllPlugin({ 27 name: '_dll_[name]', // manifest.json 描述动态链接库包含了哪些内容 28 path: path.join(__dirname, './', '[name].dll.manifest.json') 29 }), 30 // 压缩代码 31 new webpack.optimize.UglifyJsPlugin({ 32 compress: { 33 warnings: false, 34 pure_funcs: ['console.log'] 35 }, 36 sourceMap: false 37 }) 38 ] 39 }
3、在 package.json 中新增 dll 构建命令
1 "scripts": { 2 "dll": "webpack --config build/webpack.dll.conf.js" // dll打包命令 3 },
4、修改 build/webpack.prod.conf.js
1 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') 2 3 plugins: [ 4 // 引用 manifest.json 5 new webpack.DllReferencePlugin({ 6 manifest: require('./vue.dll.manifest.json') 7 }), 8 // 将 dll 注入到 生成的 html 模板中 9 new AddAssetHtmlPlugin({ 10 filepath: path.resolve(__dirname, '../src/assets/dll/*.js'), // dll文件位置 11 publicPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll 引用路径 12 outputPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll最终输出的目录 13 includeSourcemap: false 14 // hash: true, 15 }), 16 ... 17 ]
五、编译
yarn run dll // 运行一次生成 dll 文件即可，下次构建时不必运行 yarn run build
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：关于动画缓动函数的封装
下一篇：document,write()
- Jquery 快速构建可拖曳的购物车DragDrop 2019-09-30
- vue-cli3构建ts项目 2019-08-14
- vscode配置eslint 2019-08-14
- 构建Electron的常见问题（Mac） 2019-08-14
- 关于最新版本react-native0.59.x构建的问题解决方案 2019-05-08
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
