当我捆绑主文件时,我使用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.
看看,希望它有帮助!