1、vue 開啟文件大小分析
1.1 安裝
npm install webpack-bundle-analyzer --save-dev
1.2 vue.config.js 配置
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
},
};
1.3 運(yùn)行命令
npm run serve
2爆班、vue-router 使用懶加載
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}
同一個(gè) vue 文件 webpackChunkName 保持一致
3杂伟、對(duì)于第三方 js 庫分離打包
- 生產(chǎn)環(huán)境是內(nèi)網(wǎng)的話剃毒，就把資源放內(nèi)網(wǎng)斩芭，通過靜態(tài)文件引入典勇，會(huì)比 node_modules 和外網(wǎng) CDN 的打包加載快很多桅锄。
- 如果是外網(wǎng)的話琉雳，可以通過 CDN 方式引入，因?yàn)椴挥谜加迷L問外網(wǎng)的帶寬友瘤，不僅可以節(jié)省流量翠肘，還能通過 CDN 加速，獲得更快的訪問速度辫秧。但是要注意下束倍，如果你引用的 CDN 資源存在于第三方服務(wù)器，在安全性上并不完全可控盟戏。
目前采用引入依賴包生產(chǎn)環(huán)境的 js 文件方式加載绪妹，直接通過 window 可以訪問暴露出的全局變量，不必通過 import 引入柿究，Vue.use 去注冊(cè)
3.1 配置 externals
在 vue.config.js 中配置 externals
// cdn 服務(wù)
const cdn = {
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT',
},
};
module.exports = {
configureWebpack: {
externals: externals: process.env.VUE_APP_ENV !== 'development' ? cdn.externals : {}, // 非開發(fā)環(huán)境
// 未配置 VUE_APP_ENV 值可能是 process.env.NODE_ENV
}
}
3.2 使用 CDN 加載資源
/public/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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<link
rel="resource"
type="application/l10n"
href="<%= BASE_URL %>viewer.properties"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<% if (process.env.VUE_APP_ENV !== 'development' ) { %>
<link
rel="stylesheet"
/>
<% } %>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- 引入組件庫 -->
<% if (process.env.VUE_APP_ENV !== 'development' ) { %>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--vue-router -->
<script src="https://unpkg.com/vue-router@3"></script>
<!--vuex -->
<script src="https://unpkg.com/vuex@3"></script>
<!-- elementUI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<% } %>
</body>
</html>
4邮旷、移除 console.log
4.1 安裝依賴
npm install babel-plugin-transform-remove-console --save-dev
4.2 配置 babel.config.js
const prodPlugins =
process.env.VUE_APP_ENV === 'production' ? ['transform-remove-console'] : [];
module.exports = {
plugins: [...prodPlugins],
presets: ['@vue/cli-plugin-babel/preset'],
};
5、開啟 gzip
5.1 vue 開啟 gzip
（1）安裝依賴
npm i compression-webpack-plugin@5.0.1 --save-dev
（2）在 vue.config.js 配置
// gzip包
const CompressionWebpackPlugin = require('compression-webpack-plugin');
//匹配此 {RegExp} 的資源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: {
// 開啟gzip
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(productionGzipExtensions),
threshold: 10240,
minRatio: 0.8,
}),
],
},
};
5.2 nginx 開啟 gzip
gzip on;
gzip_min_length 1k;
gzip_comp_level 5;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_buffers 32 4k;
gzip_http_version 1.0;
