您的位置: 首页  >  文章  >  webpack打包优化

webpack打包优化

分类: 文章 • 2024-07-14 08:58:34

文章地址: http://blog.****.net/byc233518/article/details/74909686

项目打包速度太慢太慢, 实在受不了, 打一次包要十多分钟, 下图中可以看到优化前打包是 752039ms (差不多13分钟)

webpack打包优化

优化后: 34170ms(半分钟)

webpack打包优化


优化过程:

1.  项目根目录下添加 webpack.dll.config.js 文件, 其中 vendors 中配置的是我项目中用到的库, 配置在这里, 根据项目自身情况进行配置;

[javascript] view plain copy
  1. /* eslint-disable */  
  2. const path = require('path')  
  3. const webpack = require('webpack')  
  4.   
  5. var vendors = [  
  6.   'vue',  
  7.   'vue-router',  
  8.   'vuex',  
  9.   'iview',  
  10.   'element-ui',  
  11.   'localforage',  
  12.   'lodash',  
  13.   'md5',  
  14.   'moment',  
  15.   'vue-echarts-v3',  
  16. ]  
  17.   
  18. module.exports = {  
  19.   entry: {  
  20.     vendor: vendors  
  21.   },  
  22.   output: {  
  23.     path: path.join(__dirname, "dist"),  
  24.     filename: "Dll.js",  
  25.     library: "[name]_[hash]"  
  26.   },  
  27.   plugins: [  
  28.     new webpack.DllPlugin({  
  29.       path: path.join(__dirname, "dist", "manifest.json"),  
  30.       name: "[name]_[hash]",  
  31.       context: __dirname  
  32.     })  
  33.   ]  
  34. }  
2. 项目目录下命令行运行: $ webpack --config webpack.dll.config.js -p 命令生成 Dll.js及 manifest.json 文件

    运行后会看到dist 目录下多出个 Dll.js 及 manifest,json 文件

webpack打包优化

3. 在 index.html 中引入打好包的 Dll.js 文件

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  
  6.   <title></title>  
  7. </head>  
  8. <body>  
  9. <App></App>  
  10. <script src="dist/Dll.js"></script>  
  11. <script src="dist/build.js"></script>  
  12. </body>  
  13. </html>  

4. 执行 npm run build , 
    结束, OK!

文章地址: http://blog.****.net/byc233518/article/details/74909686

项目打包速度太慢太慢, 实在受不了, 打一次包要十多分钟, 下图中可以看到优化前打包是 752039ms (差不多13分钟)

webpack打包优化

优化后: 34170ms(半分钟)

webpack打包优化


优化过程:

1.  项目根目录下添加 webpack.dll.config.js 文件, 其中 vendors 中配置的是我项目中用到的库, 配置在这里, 根据项目自身情况进行配置;

[javascript] view plain copy
  1. /* eslint-disable */  
  2. const path = require('path')  
  3. const webpack = require('webpack')  
  4.   
  5. var vendors = [  
  6.   'vue',  
  7.   'vue-router',  
  8.   'vuex',  
  9.   'iview',  
  10.   'element-ui',  
  11.   'localforage',  
  12.   'lodash',  
  13.   'md5',  
  14.   'moment',  
  15.   'vue-echarts-v3',  
  16. ]  
  17.   
  18. module.exports = {  
  19.   entry: {  
  20.     vendor: vendors  
  21.   },  
  22.   output: {  
  23.     path: path.join(__dirname, "dist"),  
  24.     filename: "Dll.js",  
  25.     library: "[name]_[hash]"  
  26.   },  
  27.   plugins: [  
  28.     new webpack.DllPlugin({  
  29.       path: path.join(__dirname, "dist", "manifest.json"),  
  30.       name: "[name]_[hash]",  
  31.       context: __dirname  
  32.     })  
  33.   ]  
  34. }  
2. 项目目录下命令行运行: $ webpack --config webpack.dll.config.js -p 命令生成 Dll.js及 manifest.json 文件

    运行后会看到dist 目录下多出个 Dll.js 及 manifest,json 文件

webpack打包优化

3. 在 index.html 中引入打好包的 Dll.js 文件

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  
  6.   <title></title>  
  7. </head>  
  8. <body>  
  9. <App></App>  
  10. <script src="dist/Dll.js"></script>  
  11. <script src="dist/build.js"></script>  
  12. </body>  
  13. </html>  

4. 执行 npm run build , 
    结束, OK!

相关推荐