关于javascript:vue懒加载组件应用实践

库版本

"@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/polyfill": "^7.6.0","@babel/core": "^7.6.0","@babel/preset-env": "^7.6.0","babel-plugin-dynamic-import-webpack": "^1.1.0","vue": "^2.6.10","vue-router": "^3.1.3","webpack": "^4.28.3",

波及革新文件

vue-router

router/index.js
在router文件中，须要将一般的import援用改成import()援用，具体的import()知识点不在这里赘述，只须要晓得这是个异步援用即可。

将组建援用从原来的

import Comp from '../componnets/Comp';

改为

const Comp = () => import(/* webpackChunkName: "Comp" */ '../componnets/Comp');

留神正文内的/* webpackChunkName: "CourseIntro" */不可脱漏

router配置中仍然用原来的配置即可

const router = new Router({    routes: [{        path: '/pathname',        component: Comp,    }]})

webpack

webpack无需做额定配置

babel

如果应用了babel加载，须要额定援用一个库"babel-plugin-dynamic-import-webpack"
执行yarn add babel-plugin-dynamic-import-webpack --save-dev
并且在babel.config.js里配置

module.exports = {    presets: [        [            '@babel/preset-env',            {                useBuiltIns: 'usage',                corejs: '2.6',                modules: 'false', // 留神这里必须是false，否则plugin-syntax-dynamic-import不起作用            },         ],    ],    plugins: ['@babel/plugin-syntax-dynamic-import'],};

注意事项

如果要兼容无Promise环境（比方IE），须要自行援用polyfill，具体方法参考文档

参考资料

vue-router文档

webpack文档 - 代码分块

额定问题

在vue-router文档中，提到须要用Promise.resolve包裹

export default () => Promise.resolve({/* vue组件信息 */})

然而理论应用中发现如果这么做，会报错
起因不明