魔法注释
/* webpackChunkName: "about" */
Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。
在 Webpack 构建时,会避免加载已声明要异步加载的代码 ,异步代码会被单独分离出一个文件,当代码实际调用时被加载至页面。
webpack魔法注释的作用是对异步加载的模块打包生成的文件进行重命名,不设置的时候是0.js
jsx
const routes = [
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
1
2
3
4
5
6
7
2
3
4
5
6
7