vue-cli新建工程後提升頁面加載速度（含升級webpack4）

提升頁面加載速度的方式

升級webpack4.x及升級過程當中產生問題的解決方式

webpack升級一路填坑記

圖片壓縮

• 用一個webpack插件，這個插件叫 image-webpack-loader。
• 安裝插件： $ npm install image-webpack-loader --save-dev
• 相關配置修改以下：

//webpack.base.conf.js
//原先配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
	limit: 10000,
	name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}
//修改後配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: []'url-loader?limit=10000&name='utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
}

• 修改後查看對比

//源文件
$ ls -lh src/images
total 256
//壓縮後
$ ls -lh dist/images
total 96

路由懶加載，生成多個小js文件按需加載

{
	path: '/login',
	name: 'login',
	component: resolve => { require(['@/components/login.vue'],resolve) }
}

gzip壓縮

• 啓用gzip壓縮，很簡單，工程下的config/index.js中，將productionGzip由false改成true,除此以外，就須要後臺修改配置，返回gzip文件，具體方式網上不少，我在下面貼幾個。我試過，這個方式會很好的壓縮了文件，將app等文件壓縮到很小，因此頁面加載下載文件會小不少，但時間上，不必定。。。並且對於IE11來說，這個好像不能實現。。。
• gzip實現方式：
  • vue 進行 gzip壓縮和服務器如何開啓gzip
  • vue2首頁加載慢的問題
  • 關於vue在app首次加載緩慢的解決辦法
  • 前端性能優化之gzip

取消打包後的map文件

• 在打包vue文件時，會發現出現不少.map文件，
• map文件的做用：項目打包後，代碼都是通過壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏的代碼報錯。有了map就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列有錯。
• map文件下載時需佔用太多瀏覽器資源，並且特別耗時，致使加載速度慢，能夠在生產環境取消生成map文件。在工程/config/index.js文件配置中，將productionSourceMap由true改成false便可。

傳送門

• JS/CSS 體積減小了 67%，咱們是如何作到的？
• webpack4之splitchunksPlugin拆拆拆--項目實踐
• vue多頁面首頁加載優化
• webpack以前端性能優化

如有其他前端優化方式，請貼評論。