webpack分包:減少首屏加載時間-路由懶加載
- 使用webpack中的syntax-dynamic-import 插件
npm install --save-dev babel-plugin-syntax-dynamic-import
- 配置.babelrc文件(若沒有拂蝎,則新建這個文件,和package.json同級)
{
"plugins": ["syntax-dynamic-import"]
}
- Vue-route提供語法:
將import Foo from '@pages/foo' 修改為如下方式:
const Foo = () => import(@pages/foo')
最后:
參考vue官網的 動態(tài)組件 & 異步組件
推薦一篇不錯的文章:
vue項目實現按需加載的3種方式:vue異步組件拦惋、es提案的import()啦桌、webpack的require.ensure()