Angular2 + Webpack：如何优化供应商包

我有一个MEAN应用程序客户端在anular2构建webpack。Angular2 + Webpack：如何优化供应商包

当我为服务器提供初始请求的index.html时，由于供应商模块JS文件大于3MB，因此在生产应用程序时需要加载时间5或6甚至更多秒。

我如何优化这件事我想分开供应商的JS文件。以下是我的webpack.config.js

const webpack = require('webpack'); 
const production = process.env.NODE_ENV === "production"; 
const autoprefixer = require('autoprefixer'); 
const path = require("path"); 

const config = { 

    entry: { 
    'app': './client/app.ts', 
    'vendor': './client/vendor.ts' }, 

    debug: !production, 

    devtool: production ? null : "source-map", 

    output: { 
    path: "./dist", 
    filename: "bundle.js" }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js') ], 

    resolve: { 
    extensions: ['', '.ts'] }, 

    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' }, 
     { test: /\.html$/, loader: 'raw'}, 
     { test: /\.scss$/, include: [ path.resolve(__dirname, 'client/app/components') ], loader: 'style!css!postcss!sass' } 
    ], 
    noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ] }, postcss: [ autoprefixer ] }; 

module.exports = config;

以下是我文件

import 'core-js/es6'; 
import 'core-js/es7/reflect'; 
require('zone.js/dist/zone'); 

import 'ts-helpers'; 

import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 

import 'socket.io-client'; 

// RxJS 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 

import './assets/vendor/bootstrap'; 
import './assets/vendor/fontawesome.scss';

大厦项目，我可以得到 bundle.js和 bundle.map.js包含我的应用程序的js vendor.bundle.js and 个vendor.bundle.map.js将包含其他第三方JS

我想编译这个vendor.js每个库单独以及所有SCSS应该在单独的style.css在ditribution进行编译。

谢谢大家。

来源

2016-06-28 Hitesh Balar

这个问题有什么好运？我也试图找到答我的问题http://stackoverflow.com/questions/43500349/angular2-bundle-node-modules-only-and-not-application-code –

我可以看到一些方面进行改进：

我看不到你的代码中的任何微小插件，所以它会给你巨大的推动作用。见UglifyJsPlugin
您直接添加所有角模块（甚至可能不需要它们）：
```
import {Component} from '@angular/core'; 
```
拥有进口：
```
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
```
需要像时，最好是刚刚导入具体的事情像上面一样划分，你将能够获得即将到来的Webpack 2的好处。最重要的部分是：

ES6模块的静态特性允许一些新的优化。例如，在许多情况下，可以检测哪些导出已被使用，哪些未被使用。

如果webpack可以肯定地说没有使用导出，它会省略将导出公开给其他模块的语句。稍后，最小化者可以将该声明标记为未使用并省略它。

我认为所有这一切可以使您的生产应用程序更薄，无需拆分库。

来源

2016-06-28 13:09:50

Angular2 + Webpack：如何优化供应商包

回答

相关问题