我們在使用vue新建項目時老玛,其中在路由配置文件中看到了return import(/* webpackChunkName: "about" */ '../views/About.vue')
這個注釋偶洋,
作用就是webpack在打包的時候,使用異步路由以及異步引入的庫代碼進行代碼分割時(需要配置webpack的SplitChunkPlugin插件)诡曙,為分割后的代碼塊取得名字。
另外 import()
異步加載的寫法實現(xiàn)頁面模塊lazy loading懶加載(Vue中的路由異步加載):
Vue中運用import的懶加載語句以及webpack的魔法注釋,在項目進行webpack打包的時候砸王,對不同模塊進行代碼分割陨享,加載時葱淳,用到哪個模塊再加載哪個模塊钝腺,實現(xiàn)懶加載進行頁面的優(yōu)化。
動態(tài)import()
打包出來文件的name是0.js,1.js,2.js,3.js ...
依次排列,有時候我們希望打包出來的文件名是打包前的文件名稱赞厕,要實現(xiàn)這艳狐,需要經歷3各步驟:
1.在webpack
配置文件中的output
中添加chunkFilename
。命名規(guī)則根據(jù)自己的項目來定皿桑,其中[name]
就是文件名毫目,這一塊更詳細的說明請點擊這里。
//其他代碼..
output:{
path: path.resolve(__dirname,'public'),
filename:'[name].[hash:8].js',
chunkFilename:'[name].[hash:8].js'
}
2.在動態(tài)import()代碼處添加注釋webpackChunkName告訴webpack打包后的chunk的名稱(注釋中的內容很重要诲侮,不能省掉)镀虐,這里打包以后的name就是MyFile。
import(/* webpackChunkName: "MyFile" */`../containers/MyFile`)
3.大多數(shù)情況下我們使用動態(tài)import()是通過循環(huán)來做的沟绪,這樣我們就不得不引入變量了粉私,使用[request]來告訴webpack,這里的值是根據(jù)后面?zhèn)魅氲淖址畞頉Q定近零,本例中就是變量pathName的值诺核,具體如下:
import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)