篇の文章はあなたを連れて浅いwebpackのDLL最適化に入って包装します。

4402 ワード

webpack DLL 包装する

はじめに
私達は第三者のカバンを使う時、普通内部のコードは変わりませんが、webpackで包装する時、やはり第三者のカバンを処理します。いくつかの方法を利用して改善できますか？まず第三者に対して包んでから包装してもいいです。
二、実戦
1、初期化


npm init

2、部分的にwebpackを取り付ける


npm i -D webpack

3、package.jsonを編集する
行のコードを入れて、コマンドを実行しやすくします。"start": "webpack --config webpack.config.js"


{
 "name": "webpack_demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack --config webpack.config.js"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.41.5"
 }
}

4、indexを作成します


<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--   Webpack     JavaScript   -->
<script src="./dist/bundle.js"></script>
</body>
</html>

5、メーン.jsを作成し、第三者のカバンを導入する


import $ from 'jquery';
console.log($);

6、webpack.co.nfig.jsを作成する。


const path = require('path');
const webpack = require('webpack');
module.exports = {
  // JavaScript       
  entry: './main.js',
  output: {
    //                 bundle.js   
    filename: 'bundle.js',
    //         dist    
    path: path.resolve(__dirname, './dist'),
  },
  plugins:[]
};

このように、私達の基礎プロジェクトはすでに完成しました。包装します。


npm run start

時間：943 ms

以下、DLLを使って最適化します。
1、webpack.dll.jsを作成する
プラグインの使用


const webpack=require('webpack');
module.exports={
  entry:{
    vendor:['jquery'] //     
  },
  output:{
    path:__dirname+"/dll",
    filename:'[name].dll.js',
    library:'[name]_library'
  },
  plugins:[
    new webpack.DllPlugin({
      path:__dirname+'/dll/[name]-menifest.json',
      name:'[name]_library'
    })
  ]
}

2、webpack.dll.jsを実行してください。webpack.DllPluginを編集して、一行package.jsonに加入して、運転しやすいです。


{
 "name": "webpack_p",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack --config webpack.config.js",
  "dll": "webpack --config webpack.dll.js"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.41.6",
  "webpack-cli": "^3.3.11"
 }
}

コマンドを実行


npm run dll

3、webpack.co.nfig.jsを編集する
プラグインの使用


const path = require('path');
const webpack = require('webpack');
module.exports = {
  // JavaScript       
  entry: './main.js',
  output: {
    //                 bundle.js   
    filename: 'bundle.js',
    //         dist    
    path: path.resolve(__dirname, './dist'),
  },
  plugins:[
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor-menifest.json')
    })
  ]
};

4、包装


npm run start

時間：473 ms
最適化が完了しました。

三、結語"dll": "webpack --config webpack.dll.js"最適化はたくさんあります。いつも更新します。ありがとうございます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

vue中のオーディオwavesurfer.jsの使い方

cxi実現のAlipay支払い