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 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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
Yii配置文件用法详解
2014/12/04 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
简单介绍Python中的struct模块
2015/04/28 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
北体毕业生求职信
2014/02/28 职场文书
师德建设实施方案
2014/03/21 职场文书
销售经理竞聘书
2014/03/31 职场文书
活动策划求职信模板
2014/04/21 职场文书
环境卫生标语
2015/08/03 职场文书
公司考勤管理制度
2015/08/04 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js