加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2生产捆绑文件太大

发布时间:2020-12-17 09:42:13 所属栏目:安全 来源:网络整理
导读:当我捆绑主文件时,我使用webpack bundle我的角度2项目.该文件太大,文件大小约为8M.那么每当我刷新我的页面时,浏览器将需要很长时间来加载和执行 javascript文件. 我认为可能会有太多的文件,我不需要,但如何找到它,并从我的捆绑文件中踢出来? 感谢你给我一些
当我捆绑主文件时,我使用webpack bundle我的角度2项目.该文件太大,文件大小约为8M.那么每当我刷新我的页面时,浏览器将需要很长时间来加载和执行 javascript文件.
我认为可能会有太多的文件,我不需要,但如何找到它,并从我的捆绑文件中踢出来?
感谢你给我一些建议或一些帮助.

这是我的webpack配置的主要部分:
webpack.common.js:

const webpack = require('webpack');
const helpers = require('./helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

module.exports = {
    baseUrl: './',entry: {
        // 'polyfills': './src/polyfills.ts',// 'vendor': './src/vendor.ts','main': './src/main.ts'
    },resolve: {
        extensions: ['','.ts','.js','.json'],root: helpers.root('src'),modulesDirectories: ['node_modules'],},module: {
        loaders: [
            {
                test: /.ts$/,loaders: ['awesome-typescript-loader','angular2-template-loader'],exclude: [/.(spec|e2e).ts$/]
            },{
                test: /.json$/,loader: 'json-loader'
            },{
                test: /.css$/,loaders: ['raw-loader']
            },{
                test: /.html$/,loader: 'raw-loader',exclude: [helpers.root('src/index.html')]
            },{
                test: /.scss$/,loaders: ['raw-loader','sass-loader'] // sass-loader not scss-loader
            },{
                test: /.(jpg|png|gif)$/,loader: 'file'
            },{
                test: /.(png|woff(2)?|eot|ttf|svg)$/,loader: 'url-loader'
            }
        ]

    },plugins: [
        new ForkCheckerPlugin(),// new CopyWebpackPlugin([
        //     {from: 'src/assets',to: 'assets'},//     {from: 'src/app/i18n',to: 'app/i18n'},//     {from: 'src/loading.css',to: 'loading.css'},//     {from: 'src/fonts',to: 'fonts'},//     {from: 'src/favicon.ico',to: ''},//     {from: 'src/img',to: 'img'}]),new HtmlWebpackPlugin({
            template: 'src/index.html',chunksSortMode: 'dependency'
        })
    ],node: {
        global: 'window',crypto: 'empty',process: true,module: false,clearImmediate: false,setImmediate: false
    }

};

webpack.prod.js

const helpers = require('./helpers');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
/**
 * Webpack Plugins
 */
const webpack = require('webpack');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const HOST = process.env.HOST || 'localhost';

module.exports = webpackMerge(commonConfig,{
    devtool: 'source-map',output: {
        path: helpers.root('dist'),filename: '[name].bundle.js',chunkFilename: '[id].chunk.js'
    },plugins: [
        // new webpack.NoErrorsPlugin(),// 如果出现任何错误 就终止构建
        // new DedupePlugin(),// 检测完全相同(以及几乎完全相同)的文件 并把它们从输出中移除
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: ['polyfills','vendor','main'].reverse()
        // }),new UglifyJsPlugin({
            beautify: false,mangle: { screw_ie8 : true,keep_fnames: true },compress: { screw_ie8: true,warnings: false },comments: false
        }),// new ExtractTextPlugin('[name].[hash].css'),// 把内嵌的 css 抽取成玩不文件 并为其文件名添加 hash 后缀 使得浏览端缓存失效
        new DefinePlugin({ // 定义环境变量
            'process.env': {
                ENV: JSON.stringify(ENV)
            }
        }),],htmlLoader: {
        minimize: true,removeAttributeQuotes: false,caseSensitive: true,customAttrSurround: [
            [/#/,/(?:)/],[/*/,[/[?(?/,/(?:)/]
        ],customAttrAssign: [/)?]?=/]
    },tslint: {
        emitErrors: true,failOnHint: true,resourcePath: 'src'
    },process: false,setImmediate: false
    }

});

我放弃了我的vendor.ts文件
这是我的polyfills.ts

// This file includes polyfills needed by Angular 2 and is loaded before
// the app. You can add your own extra polyfills to this file.
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
我在另一天尝试了角度2,我面临着同样的问题,我的vendor.js是6M,这是一个简单的“Hello World”应用程序…

我发现以下帖子有助于了解我们应该如何对此问题采取行动(现在):
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

他在他的1.5M应用程序上使用了几种优化和压缩技术(预编译,树结构,缩小,捆绑和gzip),将其大小减少到仅50kb.

看看,希望它有帮助!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读