Question

我有一个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都应该在ditribution中的单独的style.css中编译。

谢谢大家。

Answer 1

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

我无法在您的代码中看到任何缩小插件，因此它会给您巨大的推动力。请参阅UglifyJsPlugin

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

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可以确定导出未被使用，则省略了将导出公开给其他模块的语句。稍后，最小化器可以将声明标记为未使用并省略它。

我认为所有这些可以使你的制作应用程序更薄，而不拆分库。

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

1 个答案: