node.js - প্রোডাকশন কোড কীভাবে তৈরি করবেন এবং কীভাবে এটি ব্যবহার করবেন তা ওয়েবপ্যাক




reactjs npm (6)

আমি ওয়েবপ্যাকটিতে খুব নতুন, আমি দেখতে পেলাম যে প্রোডাকশন বিল্ডে আমরা সামগ্রিক কোডের আকার হ্রাস করতে পারব। বর্তমানে ওয়েবপ্যাকটি প্রায় 5 এমবি প্রায় 8 এমবি ফাইল এবং মেইন.জেগুলি তৈরি করে। উত্পাদন বিল্ডে কোডের আকারটি কীভাবে হ্রাস করবেন? আমি ইন্টারনেট থেকে একটি নমুনা ওয়েবপ্যাক কনফিগারেশন ফাইল পেয়েছি এবং আমি আমার অ্যাপ্লিকেশনটির জন্য কনফিগার করেছি এবং আমি npm run build এবং এর শুরু বিল্ডিং npm run build করি এবং এটি ./dist/ ডিরেক্টরিতে কিছু ফাইল উত্পন্ন করে।

  1. এখনও এই ফাইলগুলি ভারী (উন্নয়নের সংস্করণ হিসাবে একই)
  2. এই ফাইলগুলি কীভাবে ব্যবহার করবেন? বর্তমানে আমি অ্যাপ্লিকেশনটি চালানোর জন্য ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করছি।

প্যাকেজ.জসন ফাইল

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

আপনার উত্পাদন বিল্ডটি অনুকূল করতে এই প্লাগইনগুলি ব্যবহার করুন:

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

আমি সম্প্রতি compression-webpack-plugin সম্পর্কে জানতে compression-webpack-plugin যা আপনার আউটপুট বান্ডেলটির আকার হ্রাস করতে গিজিপ করে। আপনার উত্পাদন কোডটি আরও অনুকূলিত করতে উপরের তালিকাভুক্ত প্লাগইন তালিকায় এটিও যুক্ত করুন।

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

ভারী সিপিইউ ব্যবহারের কারণে স্ট্যাটিক ক্লায়েন্ট-সাইড ফাইলগুলি সরবরাহ করার জন্য সার্ভার সাইড ডায়নামিক জিজেপ সংক্ষেপণ প্রস্তাবিত নয়।


আপনার ওয়েবপ্যাক.কমফিগ.জেএস ফাইলটিতে প্যারাম পাওয়ার জন্য আরজিভি এনপিএম মডিউলটি ব্যবহার করতে পারেন ( এনপিএম ইনস্টল আরগভ - সেভ চালিয়ে এটি ইনস্টল করুন ) এবং উত্পাদন হিসাবে আপনি -p পতাকাটি "বিল্ড": "ওয়েবপ্যাক -পি" ব্যবহার করতে পারেন, নীচের মত webpack.config.js ফাইলে শর্ত যুক্ত করুন

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

এবং এটাই.


আপনি @ ভিক্রামাদিত্য দ্বারা প্রস্তাবিত প্লাগইনগুলি যুক্ত করতে পারেন। তারপরে প্রোডাকশন বিল্ড তৈরি করতে হবে। আপনাকে কমান্ডটি চালাতে হবে

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

-p ওয়েবপ্যাককে একটি প্রোডাকশন বিল্ড তৈরি করতে বলে। উত্পাদনের পতাকাটি অন্তর্ভুক্ত করতে আপনাকে প্যাকেজ.জসনে বিল্ড স্ক্রিপ্ট পরিবর্তন করতে হবে।


এই প্রশ্নটিতে দর্শকের সংখ্যা পর্যবেক্ষণ করার পরে আমি বিক্রমাদিত্য এবং সন্দীপের কাছ থেকে একটি উত্তর উপসংহারের সিদ্ধান্ত নিয়েছি।

প্রোডাকশন কোডটি তৈরি করতে আপনাকে প্রথমে তৈরি করতে হবে অপ্টিমাইজেশন প্যাকেজগুলির সাথে প্রডাকশন কনফিগারেশন যেমন,

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

তারপরে প্যাকেজ.জসন ফাইলে আপনি এই উত্পাদন কনফিগারেশন সহ বিল্ড পদ্ধতিটি কনফিগার করতে পারেন

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

বিল্ডটি শুরু করতে এখন আপনাকে নিম্নলিখিত কমান্ডটি চালাতে হবে

npm run build

আমার প্রোডাকশন বিল্ড কনফিগারেশন অনুসারে ওয়েবপ্যাকটি সূত্রটি ./dist ডিরেক্টরিতে তৈরি করবে।

এখন আপনার ইউআই কোড ./dist/ ডিরেক্টরিতে উপলব্ধ। স্থিতিশীল সম্পদ হিসাবে এই ফাইলগুলি পরিবেশন করতে আপনার সার্ভারটি কনফিগার করুন। সম্পন্ন!


গিলসন পিজে উত্তর ছাড়াও:

 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 shortcut- https://webpack.github.io/docs/cli.html#production-shortcut-p দেখুন।

আপনি প্লাগইন-অ্যারে থেকে উগলিফাইজেএসপ্লাগিনটি সরিয়ে বা ঘটনাস্থল অর্ডারপ্লাগিন যুক্ত করে "-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"
},

শুধু আমি নিজে এই শিখছি। আমি দ্বিতীয় প্রশ্নের উত্তর দেব:

  1. এই ফাইলগুলি কীভাবে ব্যবহার করবেন? বর্তমানে আমি অ্যাপ্লিকেশনটি চালানোর জন্য ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করছি।

ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করার পরিবর্তে, আপনি কেবল একটি "এক্সপ্রেস" চালাতে পারেন। এনপিএম ইনস্টল "এক্সপ্রেস" ব্যবহার করুন এবং প্রকল্পের মূল ডিয়ারে একটি সার্ভার.জেএস তৈরি করুন, এরকম কিছু:

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

তারপরে, প্যাকেজ.জেসনে, একটি স্ক্রিপ্ট যুক্ত করুন:

"start": "node server.js"

পরিশেষে, অ্যাপ্লিকেশনটি চালান: সার্ভারটি npm run start করতে npm run start

একটি বিস্তারিত উদাহরণ এখানে দেখা যাবে: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (উদাহরণ কোডটি সর্বশেষ প্যাকেজগুলির সাথে সামঞ্জস্যপূর্ণ নয়, তবে এটি কাজ করবে) ছোট টুইটগুলি সহ)





webpack-dev-server