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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
javascript self对象使用详解
Oct 18 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
node.js 如何监视文件变化
Sep 01 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
分享php分页的功能模块
2015/06/16 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python xlwt模块使用代码实例
2020/06/10 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
质量工程师岗位职责
2013/11/16 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
MongoDB数据库之添删改查
2022/04/26 MongoDB