vue-cli打包优化

134 阅读 0 评论 89 点赞

我是靠谱客的博主诚心故事，这篇文章主要介绍vue-cli打包优化，现在分享给大家，希望可以做个参考。

参考文章https://github.com/kaola-fed/blog/issues/204

https://segmentfault.com/a/1190000013239622

打包优化主要是三个方面

下载文件速度慢
解析JS比较慢
渲染比较慢

服务端渲染(SSR)（服务器端渲染是加载最快的一种方式）

SEO优化

在服务端先将JS进行解析,解析完成之后生成HTML片段,再将HTML返回给前端,前端直接执行渲染界面

抽取CSS （这个vue-cli中已经解决了）如图

webpack中压缩js 的插件叫 uglifyjs-webpack-plugin，

压缩css 的插件叫 optimize-css-assets-webpack-plugin

复制代码

1
2
3
4
5
6
// css 压缩代码，将下面代码添加上去
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),

复制代码

1
2
3
4
5
6
7
8
9
10
11
 // 压缩js代码，将下面代码添加上去
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

不生成.map的文件是否压缩

productionSourceMap: false, 是否生成.map文件

productionGzip: true, 是否启用压缩功能

productionGzipExtensions: ['js', 'css'], 压缩的文件

利用cdn

复制代码

//index.html
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
//index.html
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>

删除依赖
这些依赖以前是使用npm安装，现在需要在项目文件注释掉（或直接删除这些依赖），所有用到这些你需要替换的第三方依赖文件的代码都需要删除或注释

复制代码

1
2
3
eg:
// import Vue from 'vue'
// import VueRouter from 'vue-router'

然后在webpack的配置文件里加入如下代码

复制代码

1
2
3
4
5
6
7
8
9

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'moment': 'moment',
'highlight.js': 'highlight.js'
}

注意后面的名称是改模块暴露出来的名称，具体不熟悉的可以到引入的js源码里查看。

组件按需加载也叫路由懒加载也叫组件异步加载

vue-router提供的路由懒加载可以按需加载组件。

特点: 当没有访问到某个页面路由时,不去加载对应的组件代码,节约数据请求量,加快首页DOM渲染速度

复制代码

1
2
将import home from './components/Home.vue' 这种导入方式换成
const home = () => import('../components/Home.vue');

分离第三方包

复制代码

1. 引入webpack和路径处理模块
var webpack = require('webpack');
var path = require('path');
2. 修改入口文件
entry: {
app: path.resolve(__dirname, 'src/main.js'),
// 需要分离的第三方包名写在数组中
vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview']
},
3. plugin中配置插件
// 分离第三方包插件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js' // 分离出来的js文件的名称
})
vue-cli中在webpack.prod.conf.js是这样配置的
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 1. 引入webpack和路径处理模块
var webpack = require('webpack');
var path = require('path');
2. 修改入口文件
entry: {
app: path.resolve(__dirname, 'src/main.js'),
// 需要分离的第三方包名写在数组中
vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview']
},
3. plugin中配置插件
// 分离第三方包插件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js' // 分离出来的js文件的名称
})
vue-cli中在webpack.prod.conf.js是这样配置的
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),