第一次打包vue的項目部署到tomcat服務器下時，發現初次加載特別的緩慢，將近20s頁面才加載出來，完全沒有開發環境上的那么流暢。主要原因是頁面在打包后如果不進行相關配置會導致資源文件特別的大，一次想要全部加載完成會特別的耗時。這里簡單總結一下自己用到的一些優化的方案。
首先我們可以安裝webpack-bundle-analyzer 插件，通過這個插件我們可以在打包的時候看到打包文件的大小，可以明顯的看出哪些文件比較大。
1，去掉編譯文件中map文件。在編譯好后，我們會看到文件夾下有特別多的.map文件，這些文件主要是幫助我們線上調試代碼，查看樣式。所以為了避免部署包過大，通常都不生成這些文件。
在 config/index.js 文件中將productionSourceMap 的值設置為false. 再次打包就可以看到項目文件中已經沒有map文件 （文件大小 35MB-->10.5MB）
2，vue-router 路由懶加載
懶加載即組件的延遲加載，通常vue的頁面在運行后進入都會有一個默認的頁面，而其他頁面只有在點擊后才需要加載出來。使用懶加載可以將頁面中的資源划分為多份，從而減少第一次加載的時候耗時。
懶加載路由配置：
非懶加載路由配置：
如圖所示為通過懶加載后打包的js文件。而非懶加載的打包后一般只有一個app.js 文件。
3，使用gzip壓縮
由於項目測試使用的是tomcat 服務器，因此這個我只在本地安裝Nginx 服務器進行測試。在tomcat 服務器下也有壓縮文件的方法，暫時沒試過。
1)，在安裝完依賴插件后，修改config/index.js 文件下 productionGzip：true ;
2)，然后在 webback.prod.config.js 中添加如下代碼。（文件大小 10.5MB-->3.5MB）
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
// deleteOriginalAssets:true, //刪除源文件
minRatio: 0.8
})
)
3)，最后在Nginx 下開啟gzip 。
首先安裝Nginx 服務器，然后將項目文件部署到html文件目錄下，如果端口被占用，可以修改 config/nginx.conf 文件中listen：somename 來修改端口。
開啟gzip：
在config/nginx.config 添加如下配置。
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
修改完成后，reload一下，重啟服務。
4，使用CDN加載
在打包后發現vendor.js 文件占用內存特別大，這里面主要是使用的一些第三方庫，例如 vuex,vue-router,axios，elementUI 等文件
我們除了在使用過程中單個組件引用，還可以使用CDN 加載。
通過在index.html 中直接引入第三方資源來緩解我們服務器的壓力，其原理是將我們的壓力分給了其他服務器站點。
5，其次打包后需要去掉代碼中的console.log ，防止打開f12 的時候輸出日志。
在webpack.prod.conf.js 文件中設置
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
以上就是在項目開發過程中的一點積累。