vue-cli2 构建速度优化的实现方法


Posted in Javascript onJanuary 08, 2019

对于使用 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

import Vue from 'vue'
import Router from 'vue-router'

// webpackChunkName 打包后的文件名
const Menu = () => import(/* webpackChunkName: 'Menu' */ '@/pages/menu/index.vue')

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Menu',
  component: Menu
 }
 ]
})

2、配置 .babelrc(可选)

{
 ... 
 "comments": true, // 输出编译信息
 "plugins": ["transform-vue-jsx", "transform-runtime"]
}

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

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[name].js') // 使用webpackChunkName定义的文件名
},

二、启用 uglifyjs-webpack-plugin 缓存

new UglifyJsPlugin({
  parallel: true, // 并行
  cache: true // 缓存
}),

三、关闭 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

const webpack = require('webpack')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const dllPath = path.resolve(__dirname, '../src/assets/dll') // dll文件存放的目录

process.env.NODE_ENV = 'production' // NODE_ENV 设置为 production 减少依赖

module.exports = {
 entry: { // 把 vue 相关模块的放到一个单独的动态链接库
 vue: ['babel-polyfill', 'vue', 'vue-router', 'vuex', 'axios', 'element-ui']
 },
 output: {
 filename: '[name]-[hash].dll.js', // 生成vue.dll.js
 path: dllPath,
 library: '_dll_[name]'
 },
 plugins: [ 
 new CleanWebpackPlugin(['*.js'], { // 清除之前的dll文件
  root: dllPath
 }), 
 new webpack.DefinePlugin({  
  'process.env': {
  NODE_ENV: JSON.stringify(process.env.NODE_ENV) // 设置环境变量
  }
 }), 
 new webpack.DllPlugin({
  name: '_dll_[name]',  // manifest.json 描述动态链接库包含了哪些内容
  path: path.join(__dirname, './', '[name].dll.manifest.json')
 }), 
 // 压缩代码
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false,
  pure_funcs: ['console.log']
  },
  sourceMap: false
 })
 ]
}

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

"scripts": { 
 "dll": "webpack --config build/webpack.dll.conf.js" // dll打包命令
 },

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

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

plugins: [ 
 // 引用 manifest.json
 new webpack.DllReferencePlugin({
  manifest: require('./vue.dll.manifest.json')
 }), 
 // 将 dll 注入到 生成的 html 模板中
 new AddAssetHtmlPlugin({
  filepath: path.resolve(__dirname, '../src/assets/dll/*.js'), // dll文件位置
  publicPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll 引用路径
  outputPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll最终输出的目录
  includeSourcemap: false
  // hash: true,
 }),
 ...
]

五、编译

yarn run dll // 运行一次生成 dll 文件即可,下次构建时不必运行
yarn run build

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很好用的js日历算法详细代码
Mar 07 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
一个因@click.stop引发的bug的解决
Jan 08 #Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 #Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 #Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 #Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 #Javascript
小试SVG之新手小白入门教程
Jan 08 #Javascript
vue组件通信传值操作示例
Jan 08 #Javascript
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JS 对象介绍
2010/01/20 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js轮播图代码分享
2016/07/14 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
获取Django项目的全部url方法详解
2017/10/26 Python
使用python生成目录树
2018/03/29 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
shell程序中如何注释
2012/02/17 面试题
某公司部分笔试题
2013/11/05 面试题
大课间活动制度
2014/01/18 职场文书
超市总经理岗位职责
2014/02/02 职场文书
给学校建议书范文
2014/05/13 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
人民币符号
2022/02/17 杂记