key words : vue-cli vue-router webpack

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

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

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

大型單頁面應(yīng)用往往代碼量龐大，打包后的js文件大小高大幾M甚至十幾M，從輸入網(wǎng)址到頁面顯現(xiàn)需要加載幾M的文件并解析運(yùn)行酱塔，用戶等待時(shí)間較長，造成不好的用戶體驗(yàn)危虱。實(shí)際上羊娃，頁面的首次顯示并不需要加載所有的組件代碼，甚至有些組件從用戶打開網(wǎng)址到關(guān)閉網(wǎng)頁都不會(huì)使用到埃跷，那么按某種方式將代碼切割并按需加載就能大幅提高加載速度蕊玷，改善用戶體驗(yàn)。單頁面的路由是頁面狀態(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')

然后打包赦颇，我們就會(huì)發(fā)現(xiàn)js文件多了兩個(gè) 0.[hash].js和1.[hash].js文件，
這就是切割出來的代碼赴涵。只要用戶繼續(xù)操作進(jìn)入相應(yīng)的路由媒怯，這兩個(gè)文件才會(huì)請(qǐ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