node.js - proyecto - package.json install

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

Question

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 se basa en archivos de 8 MB y main.js en 5 MB. ¿Cómo reducir el tamaño del código en la compilació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 npm run build y comenzó a npm run build y generó algunos archivos en el directorio ./dist/ .

1. Aún así, estos archivos son pesados ​​(igual que la versión de desarrollo)
2. ¿Cómo usar 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]
  }
};

Answer 1

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 uglificar tu código dos veces. Consulte https://webpack.github.io/docs/cli.html#production-shortcut-p para obtener más información.

Puede solucionar esto eliminando UglifyJsPlugin de plugins-array o agregue OccurrenceOrderPlugin y elimine la bandera "-p". entonces 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"
},

Answer 2

Después de observar el número de espectadores a esta pregunta, decidí concluir una respuesta de Vikramaditya y Sandeep.

Para crear 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 tiene que ejecutar el siguiente comando para iniciar la compilación

npm run build

Según mi paquete de configuración de compilación de producción, el paquete web construirá la fuente en el directorio ./dist .

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

Answer 3

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$/]), //https://.com/questions/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
    })
  ],

Answer 4

Puede agregar los complementos según lo sugerido por @Vikramaditya. Luego para generar la construcción de producción. Tienes que ejecutar el comando

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

-P le dice a webpack que genere una compilación de producción. Debe cambiar el script de compilación en package.json para incluir el indicador de producción.

Answer 5

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 Agregar condición en el archivo webpack.config.js como a continuación

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

Y eso es.

Answer 6

Si tiene una gran cantidad de código duplicado en su webpack.dev.config y en su webpack.prod.config, puede usar un isProd booleano para activar ciertas funciones solo en ciertas situaciones y solo tener un único 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. Debe eliminarlo de su configuración.

ACTUALIZAR:

Además de mi respuesta anterior:

Si desea ocultar su código para el lanzamiento, intente enclosejs.com . Te permite:

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

Puede instalarlo con npm install -g enclose

Answer 7

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

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

En lugar de usar webpack-dev-server, simplemente 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

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 paquetes más recientes, pero funcionará con pequeños ajustes)

Answer 8

Use estos complementos para optimizar su compilación de producción:

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

Hace poco llegué a saber acerca de la compression-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 servir archivos estáticos del lado del cliente debido al uso intensivo de la CPU.