key words : vue-cli vue-router webpack

在vue-cli+vue-router+webpack基礎(chǔ)上簡單修改配置實現(xiàn)根據(jù)路由實現(xiàn)代碼切割和懶加載

vue-cli讓我們能快速構(gòu)建一個大型單頁面web應(yīng)用，幫我們一鍵配置了路由和狀態(tài)管理，熱加載，打包webpack配置都一應(yīng)俱全。下面講解修改幾個地方來實現(xiàn)根據(jù)路由切割代碼并實現(xiàn)懶加載。

懶加載的必要性和實現(xiàn)原理

大型單頁面應(yīng)用往往代碼量龐大，打包后的js文件大小高大幾M甚至十幾M，從輸入網(wǎng)址到頁面顯現(xiàn)需要加載幾M的文件并解析運行，用戶等待時間較長，造成不好的用戶體驗。實際上，頁面的首次顯示并不需要加載所有的組件代碼，甚至有些組件從用戶打開網(wǎng)址到關(guān)閉網(wǎng)頁都不會使用到，那么按某種方式將代碼切割并按需加載就能大幅提高加載速度，改善用戶體驗。單頁面的路由是頁面狀態(tài)的主要表征，自然想到按路由來切割代碼。

Quick Start

Install dependencies to init project:

    git clone git@github.com:limianhust/vue-vue-router-webpack.git
    
    
    Start local server to launch project:
    
    cd YourProjectName
    npm run build
    npm run start

打包編譯后可以看到dist目錄下：

    |--dist
       |--static
       |  |--css
       |     |--app.[hash].css
       |     |--app.[hash].css.map
       |  |--js
       |     |--app.[hash].js
       |     |--app.[hash].js.map
       |     |--mainifest.[hash].js
       |     |--mainifest.[hash].js.map
       |     |--vendor.[hash].js
       |     |--vendor.[hash].js.map
       |--index.html

所以組件代碼集中在 app.js 里，依賴庫集中在 vendor.js 里。下面修改配置

1. 首先修改webpack配置，找到webpack.base.conf.js文件，

增加一行代碼

output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js'
},
變成：
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
chunkFilename: '[name].bundle.js'
},

然后到router文件夾里找到index.js文件，要切割的組件引入寫法：

import Hello from '@/components/Hello'
import topSide from '@/components/topSide'

改成

const Hello = () => import('@/components/Hello')
const topSide = () => import('@/components/topSide')

然后打包，我們就會發(fā)現(xiàn)js文件多了兩個 0.[hash].js和1.[hash].js文件，
這就是切割出來的代碼。只要用戶繼續(xù)操作進(jìn)入相應(yīng)的路由，這兩個文件才會請求加載。

    |--dist
       |--static
       |  |--css
       |     |--app.[hash].css
       |     |--app.[hash].css.map
       |  |--js
       |     |--0.[hash].js
       |     |--0.[hash].js.map
       |     |--1.[hash].js
       |     |--1.[hash].js.map
       |     |--app.[hash].js
       |     |--app.[hash].js.map
       |     |--mainifest.[hash].js
       |     |--mainifest.[hash].js.map
       |     |--vendor.[hash].js
       |     |--vendor.[hash].js.map
       |--index.html