基于vue-cli3.0構(gòu)建項目宫仗，npm引入多個第三方包。build之后旁仿，包體積太大導(dǎo)致首屏過長藕夫。----毫無體驗感！？莞浴毅贮！
實踐的項目喜歡搗鼓可以clone下來
只總結(jié)了親測效果明顯的幾種方案，解決方案大多來自于日吵咀啵總結(jié)及各路大佬滩褥，如有不足，請大佬補充~
1炫加、路由懶加載
在 Webpack中瑰煎，我們可以使用動態(tài) import語法來定義代碼分塊點 (split point)： import('./About.vue') // 返回 Promise
如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件俗孝，才能使 Babel 可以正確地解析語法酒甸。
結(jié)合這兩者，這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件赋铝。
const About = () => import('./About.vue')
在路由配置中什么都不需要改變插勤，只需要像往常一樣使用 About：
const router = new VueRouter({
routes: [
{ path: '/about', name:'About', component: About }
]
})
2、nginx和webpack打包同時配置Gzip
gzip是GNU zip的縮寫革骨，顧名思義是一種壓縮技術(shù)农尖。它將瀏覽器請求的文件先在服務(wù)器端進行壓縮，然后傳遞給瀏覽器苛蒲，瀏覽器解壓之后再進行頁面的解析工作卤橄。在服務(wù)端開啟Gzip支持后，我們前端需要提供資源壓縮包臂外，通過Compression-Webpack-Plugin插件build提供壓縮
// 安裝插件
cnpm i --save-dev compression-webpack-plugin
// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
// 配置webpack
configureWebpack: config => {
if (isProduction) {
// 開啟gzip壓縮
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8
}))
}
}
}
nginx配置
//nginx.conf文件里
server {
listen 80;
server_name localhost;
gzip on; #開啟
gzip_proxied any;
gzip_types
text/css
text/javascript
text/xml
text/plain
image/x-icon
application/javascript
application/x-javascript
application/json; #接受那些類型文件
}
3窟扑、優(yōu)化打包chunk-vendor.js文件體積過大
當(dāng)我們運行項目并且打包的時候，會發(fā)現(xiàn)chunk-vendors.js這個文件非常大漏健，那是因為webpack將所有的依賴全都壓縮到了這個文件里面嚎货，這時我們可以將其拆分，將所有的依賴都打包成單獨的js蔫浆。
// 在vue-config.js 中加入
module.exports = {
// 配置webpack
configureWebpack: config => {
if (isProduction) {
// 開啟分離js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
};
}
}
}
// 至此殖属，你會發(fā)現(xiàn)原先的vender文件沒有了，同時多了好幾個依賴的js文件
4瓦盛、啟用CDN加速
- 加快打包速度洗显。分離公共庫以后外潜，每次重新打包就不會再把這些打包進 vendors 文件中。
- CDN減輕自己服務(wù)器的訪問壓力挠唆，并且能實現(xiàn)資源的并行下載处窥。瀏覽器對 src 資源的加載是并行的(執(zhí)行是按照順序的)。
// 修改vue.config.js 分離不常用代碼庫
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter'
}
}
}
}
// 在public文件夾的index.html 加載
<!-- CND -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script>
5玄组、完整vue.config.js代碼
const path = require('path')
// 在vue-config.js 中加入
// 開啟gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 判斷開發(fā)環(huán)境
const isProduction = process.env.NODE_ENV === 'production';
const resolve = dir => {
return path.join(__dirname, dir)
}
// 項目部署基礎(chǔ)
// 默認(rèn)情況下滔驾，我們假設(shè)你的應(yīng)用將被部署在域的根目錄下,
// 例如：https://www.my-app.com/
// 默認(rèn)：'/'
// 如果您的應(yīng)用程序部署在子路徑中，則需要在這指定子路徑
// 例如：https://www.foobar.com/my-app/
// 需要將它改為'/my-app/'
// iview-admin線上演示打包路徑： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
? '/'
: '/'
module.exports = {
//webpack配置
configureWebpack:config => {
// 開啟gzip壓縮
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8
}));
// 開啟分離js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
};
// 取消webpack警告的性能提示
config.performance = {
hints:'warning',
//入口起點的最大體積
maxEntrypointSize: 50000000,
//生成文件的最大體積
maxAssetSize: 30000000,
//只給出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
},
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
publicPath: BASE_URL,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
devServer: {
host: 'localhost',
port: 8080, // 端口號
hotOnly: false,
https: false, // https:{type:Boolean}
open: true, //配置自動啟動瀏覽器
proxy:null // 配置跨域處理,只有一個代理
},
// 如果你不需要使用eslint俄讹，把lintOnSave設(shè)為false即可
lintOnSave: true,
css:{
loaderOptions:{
less:{
javascriptEnabled:true
}
},
extract: true,// 是否使用css分離插件 ExtractTextPlugin
sourceMap: false,// 開啟 CSS source maps
modules: false// 啟用 CSS modules for all css / pre-processor files.
},
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定義哆致，比如.set('@@', resolve('src/components'))
.set('@c', resolve('src/components'))
},
// 打包時不生成.map文件
productionSourceMap: false
}
