web html分块加载,javascript – 使用webpack代码拆分,如何加载块和HTML布局？

您应该使用require.ensure进行动态路由加载.更好的是,如果您将项目设置为使用Webpack 2 Tree摇动,则可以使用System.import.

这是如何做：

import App from 'containers/App';

function errorLoading(err) {

console.error('Dynamic page loading failed', err);

}

function loadRoute(cb) {

return (module) => cb(null, module.default);

}

export default {

component: App,

childRoutes: [

{

path: '/',

getComponent(location, cb) {

System.import('pages/Home')

.then(loadRoute(cb))

.catch(errorLoading);

}

{

path: 'blog',

getComponent(location, cb) {

System.import('pages/Blog')

.then(loadRoute(cb))

.catch(errorLoading);

}

]

};

web html分块加载,javascript – 使用webpack代码拆分,如何加载块和HTML布局？相关推荐

android 加花工具下载,Android 代码混淆并加花
APK安全: 代码混淆且加壳防止反编译 1.用到的工具jd-gui-0.3.5.windows dex2jar-0.0.9.15 IDAProv6.8 C32Asm DexFixer Windowss ...
vue-devtools\shells\chrome 错误无法为内容脚本加载 JavaScript“build/hook.js”。无法加载清单。
将persistent的值修改为true之后再次运行npm run build
动态加载javascript和css
动态加载javascript和css 一.动态加载javascript方法 <script type="text/javascript"> var style = do ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
了解无阻塞加载javascript脚本技术
偶然间看到这样一篇博客,内容很详细,概念解释的也很通俗,转过来与大家分享一下,学习学习. 原文转自:http://ghdcblog.cn/article/%E4%BA%86%E8%A7%A3%E6%9 ...
vue indev.html,webpack多入口热加载很慢
项目是多入口(多页面),每次修改代码,热加载都很慢,定格在 94% asset optimization持续5秒左右,页面才更新内容.这个应该是webpack存在的问题. 我发现减少页面数量,热加载会 ...

web html分块加载,javascript – 使用webpack代码拆分,如何加载块和HTML布局？

web html分块加载,javascript – 使用webpack代码拆分,如何加载块和HTML布局？相关推荐

最新文章

热门文章