@vuecli3.9 配置vue.config.js，文件緩存，懶加載等優化，局域網訪問。

記一次在項目中的小優化

目錄

1. 最開始懶加載遇到的問題
2. 項目緩存
3. 使用 webpack-bundle-analyzer

懶加載問題

• 當我們直接定義模塊，然後run build時，發現打包出來的js、css文件比較少，但 size比較大，而且會報一個性能警告，當然如果你不在乎他，可以忽略它，但是寫代碼，我們是認真的

• 而通過以下兩個方法，會發現，打包出來的 js、css又小，又迷人。

import

我們都知道當我們初始完 vuecli項目時，在 rotuer.js可以看到 about頁面就是使用import語法來進行延遲加載的

事實的確可以進行懶加載，並且生成單獨的 bundle[name]文件

問題來了 (當我們使用路由嵌套時)

new Router({
	routes: [
		path: '/admin',
		name: 'admin'
		component: () => import( './views/admin/index.vue'),
		children: [
			{
				path: 'home',
				name: 'home',
				component: () => import('./views/admin/home.vue'),
			}
		]
	]
})

當我們嵌套了子路由的使用，發現當訪問 /admin是正常的，但是訪問子路由時/admin/home，home組件並未加載，這個問題當時困惑了我好久。

解決方案

非常感謝 yck 羣中的一位大佬幫我解決了這個問題

.babelrc 文件

{
    "plugins": [
        "syntax-dynamic-import"
    ]
}

require

require有三種
這裏寫一個我用的

const modules_name = r => require.ensure([], () => r(require('文件相對路徑')), '取一個文件名')

緩存問題 && 局域網訪問

這裏可以看 vuecli官方中的 configureWebpack和 devServer配置項，對 output對象和host重新定義。

// 頂一個變量，對輸出文件名重新定義
const Version = 'xxxx'

module.exports = {
    configureWebpack: {
        output: {
            filename: `[name].${Version}.js`,
            chunkFilename: `[name]${Version}.js`
        }
    },
    // 設置 host: '0.0.0.0'， 可以通過局域網訪問
    devServer: {
        host: '0.0.0.0',
        port: '7000',
        open: false,
        hot: true,
    },
}