Vue項目的優化

時間 2019-11-06

標籤 vue 項目優化简体版

原文原文鏈接

1. 路由採用懶加載

官方文檔：路由懶加載；
before： css

after:

2. 配置webpack中externals，將靜態資源採用第三方託管

第一步：在webpack.base.conf.js中添加

```
externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'axios': 'axios',
 },
```
#### 第二步：修改html文件，將externals中的引用改爲cdn資源
複製代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/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/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>
  </body>
</html>
複製代碼

第三步：修改main.js文件，取掉element-ui組件

讓咱們再來看下app.js的大小html

是否是小了不少呢？😀vue

3. 對輸出的樣式表文件進行壓縮：loaderOptionsPlugin，在webpack.base.conf.js中配置

處理 SCSS 文件、或者普通的 CSS，都須要處理對生成的文件進行壓縮，特別是在生產環境裏。這裏就可使用 loaderOptionsPlugin 對輸出的 CSS 文件進行壓縮。和 extract-text-webpack-plugin 不一樣，該插件是一個 Webpack 自帶的（built-in）的插件，因此使用的時候能夠免去安裝的步驟，以下，在 plugins 中添加上就能夠：node

const Webpack = require('webpack')
......
plugins: [
  // …
  new Webpack.LoaderOptionsPlugin({ 
    minimize: process.NODE_ENV === 'production'（或者直接設置成true，不區分環境）
  })
  // … 
]
複製代碼

設置完成以後，咱們再次打包：webpack

又小了11Kb，😀

4.提取公共代碼

若是每一個頁面的代碼都將這些公共的部分包含進去，則會形成如下問題：
1.相同的資源被重複加載，浪費用戶的流量和服務器的成本。
2.每一個頁面須要加載的資源太大，致使網頁首屏加載緩慢，影響用戶體驗。若是將多個頁面的公共代碼抽離成單獨的文件，就能優化以上問題。Webpack內置了專門用於提取多個Chunk中的公共部分的插件CommonsChunkPlugin。ios

// 全部在 package.json 裏面依賴的包，都會被打包進 vendor.js 這個文件中。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }
}),
// 抽取出代碼模塊的映射關係
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
}),

複製代碼

從新打包以後，app.js被拆分紅 vendor.js 和 manifest.jsweb

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。