Webpack cómo construir código de producción y cómo usarlo

Soy muy nuevo en webpack, descubrí que en la compilación de producción podemos reducir el tamaño del código general. Actualmente, el paquete web tiene alrededor de 8 MB de archivos y main.js alrededor de 5 MB. ¿Cómo reducir el tamaño del código en la construcción de producción? Encontré un archivo de configuración de paquete web de muestra de Internet y lo configuré para mi aplicación y lo ejecuté npm run buildy comenzó a compilarse y generó algunos archivos en el ./dist/directorio.

1. Aún así, estos archivos son pesados ​​(igual que la versión de desarrollo)
2. ¿Cómo utilizar estos archivos? Actualmente estoy usando webpack-dev-server para ejecutar la aplicación.

archivo 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]
  }
};

Puede agregar los complementos como lo sugiere @Vikramaditya. Luego, para generar la construcción de producción. Tienes que ejecutar el comando

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

Le -pdice al paquete web que genere una compilación de producción. Debe cambiar el script de compilación en package.json para incluir la marca de producción.

Después de observar la cantidad de espectadores a esta pregunta, decidí concluir una respuesta de Vikramaditya y Sandeep.

Para construir el código de producción, lo primero que debe crear es la configuración de producción con paquetes de optimización como,

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

Luego, en el archivo package.json puede configurar el procedimiento de compilación con esta configuración de producción

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

ahora tienes que ejecutar el siguiente comando para iniciar la compilación

npm run build

Según mi configuración de compilación de producción, el paquete web compilará la fuente en el ./distdirectorio.

Ahora su código de IU estará disponible en ./dist/ directorio. Configure su servidor para que sirva estos archivos como activos estáticos. ¡Hecho!

Utilice estos complementos para optimizar su construcción de producción:

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

Recientemente me enteré de la compresión-webpack-plugin que comprime su paquete de salida para reducir su tamaño. Agregue esto también en la lista de complementos enumerados anteriormente para optimizar aún más su código de producción.

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

La compresión gzip dinámica del lado del servidor no se recomienda para entregar archivos estáticos del lado del cliente debido al uso intensivo de la CPU.

Solo estoy aprendiendo esto yo mismo. Responderé a la segunda pregunta:

2. ¿Cómo utilizar estos archivos? Actualmente estoy usando webpack-dev-server para ejecutar la aplicación.

En lugar de utilizar webpack-dev-server, puede ejecutar un "express". use npm install "express" y cree un server.js en el directorio raíz del proyecto, algo como esto:

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

Luego, en package.json, agregue un script:

"start": "node server.js"

Finalmente, ejecute la aplicación: npm run start para iniciar el servidor

Se puede ver un ejemplo detallado en: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (el código de ejemplo no es compatible con los últimos paquetes, pero funcionará con pequeños retoques)

Puede usar el módulo argv npm (instálelo ejecutando npm install argv --save ) para obtener parámetros en su archivo webpack.config.js y para la producción, use -p flag "build": "webpack -p" , puede agregue la condición en el archivo webpack.config.js como se muestra a continuación

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

Y eso es.

Esto te ayudara.

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

Además de la respuesta de Gilson PJ:

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

con

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

porque intenta fechar su código dos veces. Consulte https://webpack.github.io/docs/cli.html#production-shortcut-p para obtener más información.

Puede solucionar este problema eliminando UglifyJsPlugin de plugins-array o agregando OccurrenceOrderPlugin y eliminando el indicador "-p". así que una posible solución sería

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

y

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

Si tiene mucho código duplicado en su webpack.dev.config y su webpack.prod.config, puede usar un booleano isProdpara activar ciertas funciones solo en ciertas situaciones y solo tener un solo archivo 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
    }));
  }

Por cierto: el complemento DedupePlugin se eliminó de Webpack. Deberías eliminarlo de tu configuración.

ACTUALIZAR:

Además de mi respuesta anterior:

Si desea ocultar su código para su publicación, pruebe enclosejs.com . Te permite:

• hacer una versión de lanzamiento de su aplicación sin fuentes
• crear un archivo o instalador autoextraíble
• Crear una aplicación GUI de código cerrado
• Pon tus activos dentro del ejecutable

Puedes instalarlo con npm install -g enclose