vue-打包优化

0x01 安装分析模块

这里推荐使用 webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序,她可以将内容束展示为方便交互的直观树状图,让你明白你所构建包中真正引入的内容;我们可以借助她,发现它大体有哪些模块组成,找到不合时宜的存在,然后优化它。我们可以在 项目的 package.json 文件中注入如下命令,以方便运行她(npm run analyz),默认会打开 http://127.0.0.1:8888 作为展示。

安装webpack-bundle-analyzer

1
npm install --save-dev webpack-bundle-analyzer

配置方式1:

1
2
3
4
5
6
7
8
9
10
11
12
// vue.config.js
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

// package.json
"analyz": "npm_config_report=true npm run build"

测试:
npm run serve

配置方式2–失败:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
}

// package.json
"analyz": "npm_config_report=true npm run build"

测试:
npm run analyz //默认8888 端口

0x02 分析

尽量使用模块化引入
按需异步加载模块
确定引入的必要性
避免类库引而不用
路由懒加载
引入外部CDN
生产环境,压缩混淆并移除console
Webpack3 新功能: Scope Hoisting

1
2
3
4
5
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}

0x03 引入外部CDN

配置vue配置文件

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
module.exports = {
// 配置webpack
configureWebpack: {
// 配置在打包的时候不打包的模块
externals: {
vue: "Vue",
jquery: 'window.$',
"element-ui": "ELEMENT",
'vue-router': 'VueRouter',
'axios': 'axios',
'i18n': 'i18n',
"echarts": "echarts",
},
},
// 配置分析插件
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
runtimeCompiler: true,
devServer: {
host: '0.0.0.0',
port: 8082,
https: false,
hotOnly: false,
proxy: null,
},
baseUrl: '/',
outputDir: 'dist',
lintOnSave: false,
productionSourceMap: false,
}

main.js配置进行加载

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
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// import ElementUI from 'element-ui';
import ELEMENT from 'element-ui';

// 全局访问接口
import "@/config/api";
// 全局格式转换和cookie设置,请求函数
import "@/utils/func.js"
// 全局css样式
// import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css';

Vue.config.productionTip = false;
Vue.use(ELEMENT);

new Vue({
router,
store,
render: h => h(App),
created() { //当用户打开页面时前端需要检查他是否已经登录
this.checkLogin();
},
watch: { //全局路由发生变化时检查是否登陆
"$route" : 'checkLogin'
},
methods: {
checkLogin(){
//检查是否存在session
var data, result;
data = { "action": "get", "mod": "base", "id": "autoSync@state" };
result = this.secReq(this.api.globalConfig , "get", data);
if(result.hasOwnProperty("code") && result.code === "ok"){
if(this.$route.path == "/login"){
this.$router.push("/home");
}
}else{
this.$router.push('/login');
}
}
}
}).$mount('#app')

在index.html页面引入CDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>openstar</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.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.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-i18n/7.6.0/vue-i18n.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<!-- <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
坚持原创技术分享,您的支持将鼓励我继续创作!