IT狗

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

 1 import Vue from 'vue' 2 import Router from 'vue-router' 3  4 // webpackChunkName 打包后的文件名 5 const Menu = () => import(/* webpackChunkName: 'Menu' */ '@/pages/menu/index.vue') 6  7 export default new Router({ 8   routes: [ 9     {10       path: '/',11       name: 'Menu',12       component: Menu13     }14   ]15 })

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论