脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli2 构建速度优化

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

 更新时间：2019年01月08日 14:18:51   作者：lifefriend_007  
这篇文章主要介绍了vue-cli2 构建速度优化的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue.js性能优化N个技巧(值得收藏)

    Vue.js性能优化N个技巧(值得收藏)

    本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧
    2021-09-09
  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    .sync修饰符算是Vue的所有修饰符中较难理解的一个，本篇文章就带你走近.sync的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。
    2021-05-05
  • Ant Design Vue table中列超长显示...并加提示语的实例

    Ant Design Vue table中列超长显示...并加提示语的实例

    这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue Token过期问题的2种解决方案小结

    Vue Token过期问题的2种解决方案小结

    在使用token进行登录的过程中,如果token过期了,需要重新输入用户名和密码登录,这种体验肯定是不好的,下面这篇文章主要给大家介绍了关于Vue Token过期问题的2种解决方案,需要的朋友可以参考下
    2023-02-02
  • Vue页面生成PDF的最佳方法推荐

    Vue页面生成PDF的最佳方法推荐

    公众中经常会有这种场景,一些合同、协议等的页面需要进行下载,而且需要和页面保持一致,下面这篇文章主要给大家介绍了关于Vue页面生成PDF的最佳方法,需要的朋友可以参考下
    2022-05-05
  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    这篇文章主要介绍了vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE脚手架的下载和配置步骤详解

    VUE脚手架的下载和配置步骤详解

    这篇文章主要介绍了VUE脚手架下载和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue下拉框加分页搜索功能的实现方法

    Vue下拉框加分页搜索功能的实现方法

    开发任务中有这样一个需求，下拉框中需要展示超过5000条数据，甚至更多，这数据量直接整个页面卡死了，就想到在下拉框中加分页，下面小编通过实例代码介绍下Vue下拉框加分页搜索功能的实现，感兴趣的朋友一起看看吧
    2022-11-11
  • vue通过elementUI组件实现图片预览效果

    vue通过elementUI组件实现图片预览效果

    我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下
    2023-09-09
  • el-upload大文件切片上传实现示例详解

    el-upload大文件切片上传实现示例详解

    这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03

最新评论