代码敲完,项目上线,然后就要与优化相遇。
项目时间非常的长加载慢的很,至此开始前端优化之旅
项目根目录运行
npm install webpack-bundle-analyzer --save-dev
在build/webpack.dev.conf.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
devServer: {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()//分析打包文件(大小占比),解开注释打包后自动启动
]
},
}
}
运行后显示可以看到几个大的js 下面是已经优化过后的截图
优化方式:使用CDN资源
1.在vue.config.js引用需要使用cdn资源的库,再判断环境生产环境则启用cnd
const envBoole = process.env.NODE_ENV === 'development' ? false : true;
const cdn = {
// 忽略打包的第三方库
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios'
}
}
module.exports = {
configureWebpack: {
//打包忽略第三方库
externals:envBoole ? cdn.externals : {},
}
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = envBoole //判断生产环境启用cdn
return args
})
}
}
2.在piblic文件夹下的index.html中使用cnd,判断生产环境则启用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>测试</title>
<script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<link rel="icon" type="image/x-icon" href="logo.png" />
<!-- 使用 CDN 的 css 文件 -->
<% if (htmlWebpackPlugin.options.cdn) { %>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" >
<% } %>
</head>
<body style="overflow: auto !important;">
<noscript>
<strong>We're sorry but slot doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- 使用 CDN 的 JS 文件 -->
<% if (htmlWebpackPlugin.options.cdn) { %>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<% } %>
</body>
</html>