[英]Webpack Angular Code Splitting
I currently have a project set up like this: 我目前有一个像这样设置的项目:
Since angular material is a big download for my project,a white screen stays loading for about 45s.
由于角度材料是我的项目的大下载,白色屏幕保持加载约45s。 I am trying to do some code splitting to make my application load faster but I am getting errors.
我试图做一些代码拆分,以使我的应用程序加载更快,但我收到错误。 Code splitting does not seem to work for me.
代码拆分似乎对我不起作用。
core/app.module.js 核心/ app.module.js
'use strict';
require.ensure([], function (require) {
require('angular/angular.min');
require('angular-aria/angular-aria.min');
require('angular-animate/angular-animate.min');
require('angular-ui-router/release/angular-ui-router.min');
}, 'common');
var page1Module = require('./../page1/page1.module');
var page2Module = require('./../page2/page2.module');
var appRunBlock = require('./app.run');
var appConfig = require('./app.config');
var moduleName = 'app';
var app = angular.module(moduleName, [
'ui.router',
page1Module,
page2Module
])
.config(appConfig)
.run(appRunBlock);
module.exports = moduleName;
page1/page1.module.js 第1页/ page1.module.js
'use strict';
require.ensure([], function (require) {
require('angular-material/modules/js/core/core.min.js');
require('angular-material/modules/js/core/core.min.css');
require('angular-material/modules/js/core/default-theme.js');
require('angular-material/modules/js/button/button.min.js');
require('angular-material/modules/js/button/button.min.css');
}, 'page1');
var page1Route = require('./page1.route');
var page1Controller = require('./page1.controller');
var moduleName = 'app.page1';
angular.module(moduleName, [
'material.components.button'
])
.config(page1Route)
.controller('Page1Controller', page1Controller);
module.exports = moduleName;
page2/page2.module.js 第2页/ page2.module.js
'use strict';
require.ensure([], function (require) {
require('angular-material/modules/js/core/core.min.js');
require.include('angular-material/modules/js/core/core.min.css');
require.include('angular-material/modules/js/core/default-theme.js');
require('angular-material/modules/js/toolbar/toolbar.min.js');
require('angular-material/modules/js/toolbar/toolbar.min.css');
require('angular-material/modules/js/content/content.min.js');
require('angular-material/modules/js/content/content.min.css');
require('angular-material/modules/js/input/input.min.js');
require('angular-material/modules/js/input/input.min.css');
}, 'page2');
var page2Route = require('./page2.route');
var page2Controller = require('./page2.controller');
var moduleName = 'app.page2';
angular.module(moduleName, [
'material.components.toolbar',
'material.components.content',
'material.components.input'
])
.config(page2Route)
.controller('Page2Controller', page2Controller);
module.exports = moduleName;
I have this webpack.config.js 我有这个webpack.config.js
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack_config = {
context: path.join(__dirname + '/app'),
entry: {
app: './core/app.module.js'
},
output: {
path: path.join(__dirname + '/release'),
publicPath: 'http://localhost:8080/',
filename: '/js/[name].js',
chunkFilename: '/js/[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
exclude: 'node_modules',
loader: 'style!css'
},
{
test: /\.scss$/,
exclude: 'node_modules',
loader: 'style!css!sass'
},
{
test: /\.html$/,
exclude: 'node_modules',
loader: 'ngtemplate?relativeTo=' + (path.join(__dirname, './app')) + '/!html?' +
JSON.stringify({attrs: ['img:src', 'img:ng-src', 'md-icon:md-svg-src']})
}
]
},
plugins: [
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'}
])
],
devServer: {
contentBase: path.resolve('./release')
},
watch: true
};
module.exports = webpack_config;
I have tried to use require.include inside require.ensure to load my files as I need them and it does not work. 我试图在require.ensure中使用require.include来加载我的文件,因为我需要它们并且它不起作用。 I have put my libs path in the require.ensure([]) array and it does not work.
我已将我的libs路径放在require.ensure([])数组中,但它不起作用。
The only time it works if I put a second entry in webpack.config.js and put all my libs in a common chunk named 'vendor' or if I use require() not require.ensure(). 如果我在webpack.config.js中放入第二个条目并将我的所有库放在一个名为'vendor'的公共块中,或者如果我使用require()而不是require.ensure(),那么它唯一有效的时间。
Loading my angular material lib is about 1.5 MB and it takes about 30s or 1m. 加载我的角度材料库约1.5 MB,大约需要30秒或1米。 When the app load it has a white screen until all libs load.
当应用程序加载时,它有一个白色屏幕,直到所有libs加载。 That is the reason I need to code split.
这就是我需要编码拆分的原因。 I am using webpack-dev-server and it throws the following errors
我正在使用webpack-dev-server,它会引发以下错误
Please help. 请帮忙。
it looks like I needed to use ocLazyLoading for loading modules dynamically. 看起来我需要使用ocLazyLoading动态加载模块。 I also learned that you need to know the place and also the trigger when you want to load your modules, template or lib.
我还了解到,当您想要加载模块,模板或库时,您需要知道位置和触发器。 In my case I needed to load my modules with ocLazyLoading on the route.
在我的情况下,我需要在路由上加载带有ocLazyLoading的模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.