我们在使用vue新建项目时,其中在路由配置文件中看到了return import(/* webpackChunkName: "about" */ '../views/About.vue')这个注释,
路由中webpack chunkName
作用就是webpack在打包的时候,使用异步路由以及异步引入的库代码进行代码分割时(需要配置webpack的SplitChunkPlugin插件),为分割后的代码块取得名字。
另外 import()异步加载的写法实现页面模块lazy loading懒加载(Vue中的路由异步加载):
Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。
动态import()打包出来文件的name是0.js,1.js,2.js,3.js ...依次排列,有时候我们希望打包出来的文件名是打包前的文件名称,要实现这,需要经历3各步骤:
1.在webpack配置文件中的output中添加chunkFilename。命名规则根据自己的项目来定,其中[name]就是文件名,这一块更详细的说明请点击这里。
//其他代码..
output:{
path: path.resolve(__dirname,'public'),
filename:'[name].[hash:8].js',
chunk