Webpack cara membuat kode produksi dan cara menggunakannya

Saya sangat baru mengenal webpack, saya menemukan bahwa dalam produksi build kami dapat mengurangi ukuran kode secara keseluruhan. Saat ini webpack membuat sekitar 8MB file dan main.js sekitar 5MB. Bagaimana cara mengurangi ukuran kode dalam produksi build? Saya menemukan contoh file konfigurasi webpack dari internet dan saya mengonfigurasi untuk aplikasi saya dan saya menjalankan npm run builddan mulai membangun dan menghasilkan beberapa file dalam ./dist/direktori.

1. Masih file-file ini berat (sama dengan versi pengembangan)
2. Bagaimana cara menggunakan file-file ini? Saat ini saya menggunakan webpack-dev-server untuk menjalankan aplikasi.

package.json file

{
  "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]
  }
};

Anda dapat menambahkan plugin seperti yang disarankan oleh @Vikramaditya. Kemudian untuk menghasilkan build produksi. Anda harus menjalankan perintah

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

The -pmemberitahu Webpack untuk menghasilkan membangun produksi. Anda harus mengubah skrip build di package.json untuk menyertakan flag produksi.

Setelah mengamati jumlah penonton pertanyaan ini, saya memutuskan untuk menyimpulkan jawaban dari Vikramaditya dan Sandeep.

Untuk membuat kode produksi, hal pertama yang harus Anda buat adalah konfigurasi produksi dengan paket pengoptimalan seperti,

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

Kemudian di file package.json Anda dapat mengonfigurasi prosedur build dengan konfigurasi produksi ini

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

sekarang Anda harus menjalankan perintah berikut untuk memulai build

npm run build

Sesuai dengan konfigurasi build produksi saya, webpack akan membangun source to ./distdirectory.

Sekarang kode UI Anda akan tersedia di ./dist/direktori. Konfigurasikan server Anda untuk menyajikan file-file ini sebagai aset statis. Selesai!

Gunakan plugin ini untuk mengoptimalkan produksi Anda:

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

Saya baru-baru ini mengetahui tentang kompresi-webpack-plugin yang meng-gzip bundel output Anda untuk mengurangi ukurannya. Tambahkan ini juga di daftar plugin yang tercantum di atas untuk lebih mengoptimalkan kode produksi Anda.

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

Kompresi gzip dinamis sisi server tidak disarankan untuk menyajikan file sisi klien statis karena penggunaan CPU yang berat.

Baru mempelajari ini sendiri. Saya akan menjawab pertanyaan kedua:

2. Bagaimana cara menggunakan file-file ini? Saat ini saya menggunakan webpack-dev-server untuk menjalankan aplikasi.

Alih-alih menggunakan webpack-dev-server, Anda cukup menjalankan "express". gunakan npm install "express" dan buat server.js di direktori root proyek, seperti ini:

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);

Kemudian, di package.json, tambahkan skrip:

"start": "node server.js"

Terakhir, jalankan aplikasi: npm run startuntuk memulai server

Contoh detailnya dapat dilihat di: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (kode contoh tidak kompatibel dengan paket terbaru, tetapi akan berfungsi dengan sedikit perubahan)

Anda dapat menggunakan modul argv npm (instal dengan menjalankan npm install argv --save ) untuk mendapatkan params di file webpack.config.js Anda dan untuk produksi Anda menggunakan -p flag "build": "webpack -p" , Anda dapat tambahkan kondisi di file webpack.config.js seperti di bawah ini

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

Dan hanya itu.

Ini akan membantumu.

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
    })
  ],

Selain jawaban Gilson PJ:

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

dengan

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

karena itu mencoba untuk memperjelas kode Anda dua kali. Lihat https://webpack.github.io/docs/cli.html#production-shortcut-p untuk informasi lebih lanjut.

Anda dapat memperbaikinya dengan menghapus UglifyJsPlugin dari plugins-array atau menambahkan OccurrenceOrderPlugin dan menghapus "-p" -flag. jadi salah satu solusi yang mungkin adalah

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

dan

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

Jika Anda memiliki banyak kode duplikat di webpack.dev.config dan webpack.prod.config Anda, Anda dapat menggunakan boolean isProduntuk mengaktifkan fitur tertentu hanya dalam situasi tertentu dan hanya memiliki satu file 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
    }));
  }

By the way: Plugin DedupePlugin telah dihapus dari Webpack. Anda harus menghapusnya dari konfigurasi Anda.

MEMPERBARUI:

Selain jawaban saya sebelumnya:

Jika Anda ingin menyembunyikan kode Anda untuk rilis, coba enclosejs.com . Ini memungkinkan Anda untuk:

• buat versi rilis aplikasi Anda tanpa sumber
• membuat arsip atau pemasang yang mengekstrak sendiri
• Buat aplikasi GUI sumber tertutup
• Letakkan aset Anda di dalam file yang dapat dieksekusi

Anda dapat menginstalnya dengan npm install -g enclose