Webpack, як створити виробничий код і як ним користуватися

Question 1

Я дуже новачок у веб-пакеті, і я виявив, що у виробничій збірці ми можемо зменшити розмір загального коду. В даний час веб-пакет створює близько 8 МБ файлів, а main.js - близько 5 МБ. Як зменшити розмір коду у виробничій збірці? Я знайшов зразок файлу налаштування веб-пакета з Інтернету, налаштував свою програму, запустив npm run buildі розпочав її створення, і він створив деякі файли в ./dist/каталозі.

Однак ці файли важкі (такі ж, як і версія для розробки)
Як користуватися цими файлами? На даний момент я використовую webpack-dev-server для запуску програми.

файл package.json

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, public_dir , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    plugins
  ],
  module: {
    loaders: [loaders]
  }
};

webpack.production.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/frontend' , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [plugins],
  resolve: {
    root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
    extensions: ['', '.js', '.css']
  },

  module: {
    loaders: [loaders]
  }
};

Question 2

Ви можете додати плагіни, як запропонував @Vikramaditya. Потім генерувати виробниче нарощування. Вам потрібно виконати команду

webpack -p --config ./webpack.production.config.js

Веб- -pпакет повідомляє про створення виробничої збірки. Вам потрібно змінити сценарій збірки в package.json, щоб включити прапор виробництва.

Question 3

Оглянувши кількість глядачів на це питання, я вирішив закінчити відповідь Вікрамадіти та Сандіпа.

Для побудови виробничого коду перше, що вам потрібно створити, це виробнича конфігурація з пакетами оптимізації, наприклад,

  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Потім у файлі package.json ви можете налаштувати процедуру збірки за допомогою цієї виробничої конфігурації

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

тепер вам потрібно виконати таку команду, щоб розпочати збірку

npm run build

Відповідно до моєї конфігурації виробничої збірки, веб-пакет створить джерело до ./distкаталогу.

Тепер ваш код інтерфейсу буде доступний у ./dist/каталозі. Налаштуйте ваш сервер для обслуговування цих файлів як статичних активів. Готово!

Question 4

Використовуйте ці плагіни для оптимізації виробничої збірки:

  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Нещодавно я дізнався про compression-webpack-plugin, який створює gzips вашого вихідного пакета, щоб зменшити його розмір. Додайте це також до перерахованого вище списку плагінів для подальшої оптимізації вашого виробничого коду.

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

Динамічне стиснення gzip на стороні сервера не рекомендується для обслуговування статичних файлів на стороні клієнта через інтенсивне використання процесора.

Question 5

Просто навчився цього сам. Я відповім на друге запитання:

Як користуватися цими файлами? На даний момент я використовую webpack-dev-server для запуску програми.

Замість використання webpack-dev-сервера ви можете просто запустити "express". використовуйте npm install "express" і створіть server.js у кореневій директорії проекту приблизно так:

var path = require("path");
var express = require("express");

var DIST_DIR = path.join(__dirname, "build");
var PORT = 3000;
var app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

Потім у пакет.json додайте сценарій:

"start": "node server.js"

Нарешті, запустіть додаток: npm run startдля запуску сервера

Детальний приклад можна переглянути за адресою: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (приклад коду не сумісний з останніми пакетами, але він буде працювати з невеликими налаштуваннями)

Question 6

Ви можете використовувати модуль argv npm (встановіть його, запустивши npm install argv --save ) для отримання параметрів у файлі webpack.config.js, а для виробництва використовуйте прапор -p "build": "webpack -p" , ви можете додайте умову у файл webpack.config.js, як показано нижче

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development')
        }
    })
]

І це все.

Question 7

Це вам допоможе.

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), ///programming/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

Question 8

На додаток до відповіді Гілсона П.Дж .:

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

з

"scripts": {
    "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js"
},

тому що він намагається двічі згорбити ваш код. Для отримання додаткової інформації див. Https://webpack.github.io/docs/cli.html#production-shortcut-p .

Ви можете це виправити, видаливши UglifyJsPlugin з plugins-array або додавши OccurrenceOrderPlugin та видаливши прапорець "-p". так що одне з можливих рішень було б

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

і

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

Question 9

Якщо у вас є багато повторюваних кодів у вашому webpack.dev.config та вашому webpack.prod.config, ви можете використовувати логічну форму, isProdщоб активувати певні функції лише у певних ситуаціях і мати лише один файл webpack.config.js.

const isProd = (process.env.NODE_ENV === 'production');

 if (isProd) {
     plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));
    plugins.push(new UglifyJsPlugin({
      "mangle": {
        "screw_ie8": true
      },
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }));
  }

До речі: плагін DedupePlugin було видалено з Webpack. Вам слід видалити його зі своєї конфігурації.

ОНОВЛЕННЯ:

На додаток до моєї попередньої відповіді:

Якщо ви хочете приховати свій код для випуску, спробуйте enclosejs.com . Це дозволяє:

зробіть випускну версію своєї програми без джерел
створити саморозпаковується архів або інсталятор
Зробіть програму графічного інтерфейсу із закритим кодом
Помістіть свої активи всередину виконуваного файлу

Ви можете встановити його за допомогою npm install -g enclose