1. 懶加載
- SPA 應(yīng)用中....所以....
- 常見的比如在
vue-router中使用懶加載
{
path: '/',
component: () => import('./views/HomeView'),
},
{
path: '/login',
component: () => import('./views/Login'),
},
// 或者
const HomeView = () => import('./views/HomeView')
const Login = () => import('./views/Login')
{
path: '/',
component: HomeView,
},
{
path: '/login',
component: Login,
},
webpack 按需加載打包優(yōu)先級/層級：
- 入口文件中使用的組件將打包到公共文件中瞧捌，優(yōu)先于任何 chunk 加載
// main.js
// 加載且優(yōu)先加載一次
import ElementUI from 'element-ui'
Vue.use(ElementUI)
// Login.vue
// 之后加載其他模塊且正常使用（mian.js 已安裝組件）
<el-card>
...
</el-card>
訪問 / 時(shí)瀏覽器會(huì)加載 0.1dfesw3131de1.js
訪問 /login 時(shí)瀏覽器會(huì)加載 1.xawer12312321.js
其文件名結(jié)構(gòu)如下
// build/webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
// 對應(yīng) entry 里面生成出來的文件
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// 未被列在 entry 且需要被打包出來的文件
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
即打包之后組件/頁面文件名是以 chunkFilename 配置的格式命名的载绿。
魔法注釋
- 指定哪幾個(gè)頁面打包在一起唉侄，用于兩個(gè)密切相關(guān)的頁面一次性加載育勺；
- 指定打包后的
chunkFilename文件名蕾额，便于美觀早芭，排查錯(cuò)誤等。
在 import 體中添加注釋
{
path: '/singup',
component: () => import(/* webpackChunkName: "auth" */ './views/Singup'),
},
{
path: '/login',
component: () => import(/* webpackChunkName: "auth" */ './views/Login'),
},
在配置文件中指定名稱格式
// build/webpack.prod.conf.js
output: {
...
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
},
之后訪問 /login 時(shí)瀏覽器加載 auth.w23423341.js, 訪問 /singup 時(shí)瀏覽器無需加載組件信息诅蝶。
關(guān)于是否需要 chunkhash 討論
瀏覽器緩存詳解:expires,cache-control,last-modified,etag詳細(xì)說明
這里是瀏覽器退个、緩存的問題，使用 chunkhash 即代表模塊內(nèi)容改變會(huì)引起文件名改變调炬，瀏覽器不會(huì)從緩存中加載到已改變的文件语盈；否則某些 HTTP Server 配置下將導(dǎo)致瀏覽器不去加載更新后的文件，部署生效需要依賴 reload 服務(wù)器或者客戶端手動(dòng)清除緩存缰泡。
