vue项目打包优化

  1. 路由懒加载,通常运行项目时,一开始就加载所有资源,会导致进程缓慢,消耗时间。如果在路由加载时使用懒加载,就可以确保进入当前路由就会加载对应的资源,提高加载速度,减轻进程压力。

{
path: '/login',
component: () => import('@/view/home/index.vue),
hidden: true
}

2. webpack 配置排除打包。将一些不常用到的包,排除在生成的打包文件之外,例如 element.js 
需要在 vue.config.js 中进行配置  添加 externals 

configureWebpack: {
name: name,
externals: {
'vue': 'Vue',
'element-ui': 'ElementUI'
},
resolve: {
alias: {
'@': resolve('src')
}
}
}

3. 引用网络资源替代本地资源(CDN)。一些依赖包文件项目中需要使用到,但是放在本地的话会占用内存和大小。还有一些静态资源,如js、图片、css、视频文件之类的,放在本地会占用打包后的内存资源,此时就可以将文件通过CDN的形式引入来使用。' Content Delivery Network', 内容发布网络,可以减少应用打包出来的包体积;可以加快静态资源的访问;可以利用浏览器缓存,不会变动的文件长期储存。
### 区分环境
本地和开发环境中,由于不需要打包或者不用过于考虑包大小的问题,依赖包文件可以照常从 node_modules 中取出,而当项目上线,生产环境时,就需要使用外部资源,对打包进行优化,可以使用环境变量来进行区分   vue.config.js 文件中配置

let externals = {};
let cdn = { css:[], js:[ ] };
const isProduction = process.env.NODE_ENV === 'production'; // 判断是否是生产环境
is(isProduction) {
externals = {
'element-ui': 'ELEMENT',
}
cdn = {
css: [
'http://'
],
js: [
'http://'
]
}
}

通过 html-webpack-plugin 注入到 index.html 之中,在 vue.config.js 中配置

chainWebpack(config) {
config.plugin('preload').tap(() => [
{
rel: 'preload',
fileBlacklist: [/.map/, /hot-updata\.js/, /runtime..*.js$/],
include: 'initial'
}
])
// 注入 csn 变量(打包的时候会执行)
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}

找到 public文件夹下index.html, 通过配置 CDN config 注入css和js资源,修改head内容

// 引入css样式
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet' href="<%=css>">
<% } %>

// 引入 js
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>