Angular2 + Webpack：如何优化供应商捆绑包答案

【问题标题】：Angular2 + Webpack : how to optimise vendor bundleAngular2 + Webpack：如何优化供应商捆绑包
【发布时间】：2016-10-30 19:37:16
【问题描述】：

我有一个 MEAN 应用程序客户端在 anular2 build 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;

以下是我的vendor.ts文件

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 和 vendor.bundle.map.js 将包含其他第三方 js

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

谢谢大家。

【问题讨论】：

这个问题好运吗？我也试图找到我的问题的答案stackoverflow.com/questions/43500349/…

标签： javascript node.js angular webpack

【解决方案1】：

我可以看到一些需要改进的地方：

我在你的代码中看不到任何缩小插件，所以它会给你巨大的推动力。见UglifyJsPlugin

您直接添加了所有 Angular 模块（即使它们可能不需要）：

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

最好只在需要时导入特定的东西，例如：

import {Component} from '@angular/core';

像上面那样划分导入，您将能够获得即将推出的Webpack 2 的好处。最重要的部分是：

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

在 webpack 可以确定没有使用导出的情况下，它会省略将导出暴露给其他模块的语句。稍后最小化器可能会将声明标记为未使用并忽略它。

我认为所有这些结合在一起可以使您的生产应用程序更加精简，而无需拆分库。

【讨论】：