vue 打包后app.css,verondor.js文件過大

參考：https://blog.csdn.net/feiyu_may/article/details/80987404
         https://blog.csdn.net/qq_41999617/article/details/88052534

　　　https://blog.csdn.net/u013788943/article/details/79786558

 　　  https://blog.csdn.net/weixin_33860737/article/details/91461972

1. 查看各部分文件大小及編譯后文件大小

(1) 使用webpack-bundle-analyzer工具，先安裝依賴包

npm install cross-env --save-dev

  (2) 然后在package.json的scripts中添加

"analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"

如下

"scripts": {
　　"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
　　"start": "npm run dev",
　　"build": "node build/build.js",
　　"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}

(3) 執行npm run analyze，就會在瀏覽器自動打開一個頁面顯示文件信息。如下圖

 

 

每一塊是一個編譯文件及其所編譯的源文件內容，最上方的文件是編譯完成的文件，下面的其他文件就是此編譯文件所編譯的源文件，色塊的大小代表文件大小，這樣我們可以很直觀地看出哪些文件比較大。

2. 幾種壓縮文件的方式。

(1)、vue-router懶加載

export default new Router({
　　routes: [{
　　　　path: '/',
　　　　name: 'Home',
　　　　meta: {
　　　　　　index: 0,
　　　　　　keepAlive: true,
　　　　　　title: '首頁'
　　　　},
　　　　component: resolve => require(['../components/Home'], resolve) //關鍵
　　},
　　{
　　path: '/mine',
　　name: 'Mine',
　　meta: {
　　　　index: 1,
　　keepAlive: false,
　　title: '個人中心'
　　},
　　component: resolve => require(['../components/Mine'], resolve)
}]

 

(2)、工程文件打包的時候不生成.map文件

npm run build編譯之后，我們查看編譯生成的文件，發現有很多.map文件，這些文件也占了不小的空間。.map文件的作用是幫助編譯后的代碼調試，但是我們上線的代碼已經調試完成，所以上線時可以不生成.map文件。

在config/index.js中將productionSourceMap的值修改為false

 

(3)、gzip壓縮

安裝插件

npm install --save-dev compression-webpack-plugin

在config的index.js文件找到productionGzip，將屬性值false改為true。

要使用這一方式，需要服務器端的支持。以tomcat為例

找到tomcat的server.xml文件，找到其中Connector節點然后進行配置修改，具體配置如下

<Connector port="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

參數說明：

• compression="on" 打開壓縮功能
• compressionMinSize="2048" 啟用壓縮的輸出內容大小，當被壓縮對象的大小>=該值時才會被壓縮，這里面默認為2KB
• noCompressionUserAgents="gozilla, traviata" 對於以下的瀏覽器，不啟用壓縮
• compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 壓縮類型

 之后刷新頁面（ 注意禁用緩存 ），觀察 js、css 等資源文件的請求中是否包含 Content-Encoding: gzip，如果存在，則表明 gzip 已成功。

 

(4)、CDN

在項目開發中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時找不到組件報錯。

index.html中

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>

webpack.base.config.js中

entry: {
　　app: './src/main.js'
},
externals: { //關鍵
　　'vue': 'Vue',
　　'vue-router': 'VueRouter',
　　// 'vuex': 'Vuex',
　　'axios': 'axios',
　　'element-ui': 'ELEMENT'
},
output: {
　　path: config.build.assetsRoot,
　　filename: '[name].js',
　　publicPath: process.env.NODE_ENV === 'production' ?
　　config.build.assetsPublicPath : config.dev.assetsPublicPath
},