Javascript Angular 8和Webpack 3.7渲染速度极慢
渲染(刷新)需要35秒,启动网页需要1.15秒以上 我尝试过优化Webpack,启动它的速度更快,但大部分时间都是在加载main.js并处理它之后进行的 我做了一个侧面图,但不知道要花这么长时间 我怎样才能加快发展?每次文件更改都需要35-60秒来预览和测试Javascript Angular 8和Webpack 3.7渲染速度极慢,javascript,node.js,angular,typescript,webpack,Javascript,Node.js,Angular,Typescript,Webpack,渲染(刷新)需要35秒,启动网页需要1.15秒以上 我尝试过优化Webpack,启动它的速度更快,但大部分时间都是在加载main.js并处理它之后进行的 我做了一个侧面图,但不知道要花这么长时间 我怎样才能加快发展?每次文件更改都需要35-60秒来预览和测试 { "name": "....", "version": "0.0.0", "scripts": { "start": "webpack-dev-server --env.NODE_ENV=development
{
"name": "....",
"version": "0.0.0",
"scripts": {
"start": "webpack-dev-server --env.NODE_ENV=development --https --mode development --open",
"start:prod": "webpack-dev-server --env.NODE_ENV=production --https --open"
},
"private": true,
"dependencies": {
"@angular/common": "^8.1.3",
"@angular/compiler": "^8.1.3",
"@angular/core": "^8.1.3",
"@angular/fire": "^5.2.1",
"@angular/forms": "^8.1.3",
"@angular/platform-browser": "^8.1.3",
"@angular/platform-browser-dynamic": "^8.1.3",
"@angular/router": "^8.2.0",
"@types/google.analytics": "0.0.40",
"angular-svg-icon": "^7.2.1",
"cross-env": "^5.2.0",
"crypto-js": "^3.1.9-1",
"dotenv": "^8.1.0",
"firebase": "^6.3.4",
"google-libphonenumber": "^3.0.9",
"hammerjs": "^2.0.8",
"ngx-international-phone-number": "^1.0.4",
"ngx-swiper-wrapper": "^8.0.2",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.2",
"sass-resources-loader": "^2.0.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.801.3",
"@angular/animations": "^8.2.0",
"@angular/cdk": "^8.1.2",
"@angular/cli": "^8.2.1",
"@angular/compiler-cli": "^8.1.3",
"@angular/language-service": "^8.1.3",
"@angular/material": "^8.1.2",
"@types/jasmine": "^3.3.16",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^11.13.20",
"angular2-template-loader": "^0.6.2",
"codelyzer": "^5.0.0",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"moment": "^2.24.0",
"ngx-daterangepicker-material": "^2.1.8",
"node-sass": "^4.12.0",
"protractor": "~5.4.0",
"raw-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"ts-loader": "^5.4.5",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "3.4.5",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
网页包配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = env => {
return {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js'],
alias: {
styles: path.resolve(__dirname, '../src/styles')
}
},
output: {
pathinfo: false
},
devServer: {
historyApiFallback: true
},
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.scss$/,
loader: ["raw-loader", "sass-loader", {
loader: 'sass-resources-loader',
options: {
resources: ['./src/styles.scss']
},
}]
},
{
// Hide import warnings
test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
parser: {system: true},
},
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}),
new webpack.DefinePlugin({"process.env.NODE_ENV": JSON.stringify(env.NODE_ENV)})
]
}
}
对于此规则
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader']
},
您需要添加排除以排除节点\模块包
{
test: /\.ts$/,
exclude: /node_modules/,
use: ['ts-loader', 'angular2-template-loader']
},
您是否尝试在每个规则中使用
exclude:/node\u modules/
配置设置?我感觉你的ts规则在捆绑的js中包含了一堆(如果不是所有的节点_模块的话)。@DevinOlsen所以添加了排除,确实减少了10%的实际构建时间。。。但问题显然在别处。我在原来的帖子中添加了更多的细节,因为我相信这个问题还存在于其他地方。@smorhaim你能投票支持我的答案吗。那对我会有很大帮助。非常感谢。