搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > 想不起来了 > vue-cli2 构建速度优化

vue-cli2 构建速度优化

想不起来了 2019-01-21
举报

对于使用 vue-cli 脚手架创建的前端项目,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要好几分钟,慢如蜗牛。如果是线上进行热修复,那更是分秒必争,网页响应的速度直接影响了用户体验,用户不会那么有耐心长时间等着,让你慢慢编译。


网上流传 vue-cli 一些优化配置,其实新版本的 vue-cli 和 webpack3 已经不再需要了,对于新版本的 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、安装

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

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《vue-cli2 构建速度优化》的版权归原作者「想不起来了」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注想不起来了微信公众号

想不起来了微信公众号:togetherforevercw

想不起来了

手机扫描上方二维码即可关注想不起来了微信公众号

想不起来了最新文章

精品公众号随机推荐

举报