主要作用
- 优化打包文件体积,加速HTTP文件请求，提高网站访问速度
如何查看打包后文件构建大小？
- vue-cli 自带构建大小查看命令
- 步骤如下:
- 修改package.json文件
....
"scripts": {
"dev": "vue-cli-service serve",
//修改这里添加上 --report
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
},
...
2.直接启动命令
npm run build
或者
yarn build
- 查看打包后文件生成的 report.html 文件
-
如图所示，显示面积较大的即为引用较大的文件，可以对其进行CND引用优化:
image.png
公共CND服务器参考
配置参考
vue.config.js 配置参考
module.exports = {
...
//写入如下代码（开始）
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
var externals = {
vue: 'Vue',
axios: 'axios',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
vuex: 'Vuex'
}
config.externals(externals)
/**
使用CND替代你 package.json 文件中的所使用到的库（注意一定要对应版本）
*/
const cdn = {
css: [
// element-ui css
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css'
],
js: [
// vue
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
// vue-router
'https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js',
// vuex
'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
// axios
'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
// element-ui js
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/index.js',
// echarts
'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js'
]
}
// 通过 html-webpack-plugin 将 cdn 注入到 index.html 之中
config.plugin('html')
.tap(args => {
args[0].cdn = cdn
return args
})
}
}
//写入如上代码（结束）
...
}
index.html界面配置参考
<!DOCTYPE html>
<html lang="">
<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" />
<title>车间基础信息管理平台</title>
<% if (process.env.NODE_ENV==='production' ) { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" as="style" />
<% } %>
<% } %>
</head>
<body>
<div id="app"></div>
<% if (process.env.NODE_ENV==='production' ) { %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<% } %>
</body>
</html>
