javascript - Angular2 + Webpack : how to optimise vendor bundle

Question

我有一个 MEAN 应用程序客户端位于 anular2 构建 webpack 中。

当我从服务器提供 index.html 进行初始请求时，在生产应用程序时，由于 vendor 模块 JS 文件超过 3MB，加载时间需要 5 或 6 秒甚至更多。

我如何优化这个东西我想分离 vendor 的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';

Building project I can get bundle.js and bundle.map.js contains my application js vendor.bundle.js and vendor.bundle.map.js will contain other third party js

我想单独编译这个 vendor.js 每个库，并且所有 scss 都应该在分发中的单独 style.css 中编译。

谢谢大家。

Answer 1

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

1. 我在你的代码中看不到任何缩小插件，所以它会给你一个巨大的插入。请参阅UglifyJsPlugin

2. 您直接添加了所有 Angular 模块(即使它们可能不需要):

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

   最好在需要时导入特定的内容，例如:

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

3. 按照上面的方式划分导入，您将能够获得即将推出的 Webpack 2 的好处。 。最重要的部分是:

The static nature of ES6 Modules allows some new kind of optimizations. In example in many cases it's possible to detect which exports are used and which aren't used.

In cases in which webpack can say for sure that an export isn't used it omits the statement which exposes the export to other modules. Later the minimizer may flag the declaration as unused and omits it.

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