webpack 减小编译后的文件大小_webpack 编译时减小文件大小 - CSDN
精华内容
参与话题
  • 彻底解决 webpack 打包文件体积过大

    万次阅读 2017-04-14 14:56:36
    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 ...

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。

    去除不必要的插件

    刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin… 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。

    提取第三方库

    像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置

    {
      entry: {
       bundle: 'app'
        vendor: ['react']
      }
    
      plugins: {
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
      }
    }

    这样打包之后就会多出一个 vendor.js 文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在 index.html 中

     <script src="/build/vendor.js"></script>
     <script src="/build/bundle.js"></script>

    除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置

    {
      externals: {
         'react': 'React'
      }
    }

    externals 对象的 key 是给 require 时用的,比如 require(‘react’),对象的 value 表示的是如何在 global 中访问到该对象,这里是 window.React。这时候 index.html 就变成下面这样

    <script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
    <script src="/build/bundle.js"></script>

    当然,个人更推荐第一种方式。

    代码压缩

    webpack 自带了一个压缩插件 UglifyJsPlugin,只需要在配置文件中引入即可

    {
      plugins: [
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        })
      ]
    }

    加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。

    另外,服务器端还可以开启 gzip 压缩,优化的效果更明显。

    代码分割

    什么是代码分割呢?我们知道,一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说,我们更想要的是只加载当前 UI 的代码,没有点击的部分不加载。

    看起来好像挺麻烦,但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。

    code split 是不支持 ES6 的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用 ES6 的方式,这时候不管导入是用 CommomJs 还是 AMD,都会失败,而且还不会报错!

    当然会踩到这个坑也是因为我刚刚才用 NodeJS,而且一入门就是用 ES6 的风格。除了这个之外,还有一点也要注意,在生产环境的 webpack 配置文件中,要加上 publicPath

    output: {
        path: xxx,
        publicPath: yyy,
        filename: 'bundle.js'
    }

    不然的话,webpack 在加载 chunk 的时候,路径会出错。

    设置缓存

    开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。

    对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现

    output: {
        path: xxx,
        publicPath: yyy,
        filename: '[name]-[chunkhash:6].js'
    }

    打包后的文件名加入了 hash 值

    const bundler = webpack(config)
    
    bundler.run((err, stats) => {
      let assets = stats.toJson().assets
      let name
    
      for (let i = 0; i < assets.length; i++) {
        if (assets[i].name.startsWith('main')) {
          name = assets[i].name
          break
        }
      }
    
      fs.stat(config.buildTemplatePath, (err, stats) => {
        if (err) {
          fs.mkdirSync(config.buildTemplatePath)
        }
    
        writeTemplate(name)
      })
    })

    手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。

    这样子,我们就可以把文件的缓存设置得很长,而不用担心更新问题。

    转载:http://www.jianshu.com/p/a64735eb0e2b

    展开全文
  • 结论结论:vue中,直接引用文件,可以让打包文件最小。

    结论

    结论:vue中,直接引用文件,可以让打包文件最小。

    试验记录

    下面测试项目中引入一个Button组件的代价。

    基准工程大小:

    [raywill:shop]npm run build
    
    > shop@ build /Users/raywill/code/vue/shop
    > cross-env NODE_ENV=production webpack --progress --hide-modules
    
    Hash: d902d9dc5e1698eaa9ea
    Version: webpack 1.12.14
    Time: 6584ms
           Asset     Size  Chunks             Chunk Names
        build.js  80.7 kB       0  [emitted]  main
    build.js.map   690 kB       0  [emitted]  main 

    通过引入组件的方式

     import {Button} from 'vue-weui'

    增加了21.3K的大小

    [raywill:shop]npm run build
    
    > shop@ build /Users/raywill/code/vue/shop
    > cross-env NODE_ENV=production webpack --progress --hide-modules
    
    Hash: f694bcd5ed5727442173
    Version: webpack 1.12.14
    Time: 8039ms
           Asset    Size  Chunks             Chunk Names
        build.js  102 kB       0  [emitted]  main
    build.js.map  890 kB       0  [emitted]  main

    直接引用button.vue文件

    import Button from 'vue-weui/components/button/button.vue';

    文件大小只增加了0.8KB

    [raywill:shop]npm run build
    
    > shop@ build /Users/raywill/code/vue/shop
    > cross-env NODE_ENV=production webpack --progress --hide-modules
    
    Hash: 319a98bac47333236f71
    Version: webpack 1.12.14
    Time: 6778ms
           Asset     Size  Chunks             Chunk Names
        build.js  81.5 kB       0  [emitted]  main
    build.js.map   695 kB       0  [emitted]  main

    由此可见,为了最大程度降低打包文件的大小,目前最好的方式还是手工引入对应的组件文件。

    可别小看这种差异,对于较大的库,采取两种方式的差别是很大的,例如vux库,二者大小可相差400KB:

    // 引用部分组件
    import {Circle} from 'vux';
    [raywill:shop]npm run build
    
    > shop@ build /Users/raywill/code/vue/shop
    > cross-env NODE_ENV=production webpack --progress --hide-modules
    
    Hash: 8770eef20f62e11410ac
    Version: webpack 1.12.14
    Time: 53821ms
           Asset     Size  Chunks             Chunk Names
        build.js   480 kB       0  [emitted]  main
    build.js.map  1.97 MB       0  [emitted]  main
    // 只引用需要的文件
    import Circle from 'vux/components/circle/'
    [raywill:shop]npm run build
    
    > shop@ build /Users/raywill/code/vue/shop
    > cross-env NODE_ENV=production webpack --progress --hide-modules
    
    Hash: 926fd28e8edd00ddae53
    Version: webpack 1.12.14
    Time: 6652ms
           Asset     Size  Chunks             Chunk Names
        build.js  82.4 kB       0  [emitted]  main
    build.js.map   696 kB       0  [emitted]  main

    参考资料

    参考资料 里面有明确的注释:

    
    // 引用部分组件
    import {Dialog} from 'vue-weui';
    // 或
    // 只引用需要的文件,减少文件大小
    import Dialog from 'vue-weui/components/dialog/dialog.vue';
    
    export default {
      components: {
        Dialog
      }
    };

    课后思考题

    引用部分组件,比只引用需要的文件,多做了哪些事,导致文件变大?

    思考题答案

    通过分别用两种写法编译,探究到了问题的根源:
    两种写法的对比

    上图中,左边为引用需要的文件,右边为引用部分组件。引用部分组件,背后实际上是引用了整个组件库,然后只把库中的一部分暴露给用户。

    下面通过文件大小,进一步证实了这一观察:

     422169  node_modules/vux/vux.js
     280020  fi.js  // 单独文件方式
     700310  md.js  // 子模块方式
    
     vux.js + fi.js ~= md.js 

    那么,有没有智能的方式,自动去掉不需要的文件引用呢?应该有,不过可以猜想到,不会有特别大的改善。如果你有好办法,请留言。


    UPDATE(2016/04/21):

    谢谢Lxxyx的留言。

    下一代打包工具Rollup和Webpack2支持该功能,详细参考:https://ouvens.github.io/frontend-build/2016/01/20/next-generation-js-module-bunlder.html

    展开全文
  • react生成之后容量 太大 解决方案

    千次阅读 2020-07-27 23:37:37
    首先你是不是webpack 打包 react之后就悲剧了, 直接出来一个 660k的 js 是不是震惊了 ? 在看看我压缩过的 是不是又震惊了 好 直接告诉你为什么把 首先你得有 webpack.config.js文件 配置下 plugins:...

    首先你是不是webpack  打包 react之后就悲剧了,

    直接出来一个   660k的  js  

    是不是震惊了  ?

     

     

    在看看我压缩过的 

     

    是不是又震惊了

     

    好 直接告诉你为什么把 

    首先你得有 

    webpack.config.js文件   配置下 

     

     plugins:[
        	new webpack.DefinePlugin({ // <-- 减少 React 大小的关键
    		  'process.env': {
    			'NODE_ENV': JSON.stringify('production')
    		  }
    		}),
    		new webpack.optimize.DedupePlugin(), //删除类似的重复代码
    		new webpack.optimize.UglifyJsPlugin(), //最小化一切
    		new webpack.optimize.AggressiveMergingPlugin()//合并块
        ]


     

     

     

    好  以后愉快的  webpack吧

    对了   有碰到问题  来群里问我吧    前端交流群

     

    展开全文
  • new webpack.optimize.UglifyJsPlugin({ //删除注释 output:{ comments:false }, //删除console 和 debugger 删除警告 compress:{ ...
    new webpack.optimize.UglifyJsPlugin({
                //删除注释
                output:{
                    comments:false
                },
                //删除console 和 debugger  删除警告
                compress:{
                    warnings:false,
                    drop_debugger:true,
                    drop_console:true
                }
            })

    uglifyJsPlugin 用来对js文件进行压缩,减小js文件的大小。其会拖慢webpack的编译速度,建议开发环境时关闭,生产环境再将其打开。

    UglifyJsPlugin 文档

    vue cli 3.0中,  在vue.config.js中配置

    configureWebpack:{
        optimization: {
          minimizer: [
            new UglifyJsPlugin({
              uglifyOptions: {
                // 删除注释
                output:{
                  comments:false
                },
                // 删除console debugger 删除警告
                compress: {
                  warnings: false,
                  drop_console: true,//console
                  drop_debugger: false,
                  pure_funcs: ['console.log']//移除console
                }
              }
          })
        ]
        }
      }

    运行出现报错 UglifyJs
    DefaultsError: warnings is not a supported option

    降低版本(使用 "uglifyjs-webpack-plugin": "^1.1.1"),打包正常,效果达到

    展开全文
  • Webpack——令人困惑的地方

    万次阅读 2016-07-15 08:42:52
    Webpack是目前基于React和Redux开发的应用的主要打包工具。...当我第一次看到Webpack的配置文件时,它看起来非常的陌生,我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比
  • Vue项目中Webpack打包排除Element-UI

    千次阅读 2019-03-05 10:13:15
    1. webpack.base.conf.js 中 externals部分配置: externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios':'axios', 'element-ui': 'ElementUI', } 2. 在 main.js 中去除Vue.use(ElementUI) ...
  • 在前端做加载速度优化的方案中,有一个是对源码和图片大小进行压缩。顾名思义就是将源码去掉...所以用到了webpack打包工具,在我未进行优化的情况下,发布的源码包大小为13.6m,进过处理之后,源码大小从原先的13...
  • webpack打包分析与性能优化

    千次阅读 2018-01-02 09:46:57
    在去年年末参与的一个项目中,项目技术栈使用react+es6+ant-design+webpack+babel,生产环境全量构建将近三分钟,项目业务模块多达数百个,项目依赖数千个,并且该项目协同前后端开发人员较多,提高webpack 构建效率...
  • 简要介绍:在webpack的官网,给出了十几种sourcemap,那么每一种sourcemap之间有什么区别,本文在理解sourcemap的基础上,分析在生产和开发环境中,应该采用何种形式的sourcemap 一 、 从Sourcemap和Data URL说起 ...
  • Webpack 打包优化之速度篇

    千次阅读 2017-11-06 09:12:11
    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打包速度的提升,也是大有裨益。然而,打包速度之于开发体验和及时构建,相当重要;所以有必要对其做更为深入...
  • 从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js...
  • webpack打包优化的解决方案

    千次阅读 2018-05-11 14:44:35
    一、DLL方式 DLL方式就是通过配置,告诉webpack指定库在项目中的位置,从而直接引入,...webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能 新建webpack.dll.config.js const...
  • webpack 常用配置

    千次阅读 2019-12-09 15:52:53
    webpack是目前前端开发中最流行的打包工具,不仅能实现 JS 打包,还能将 CSS 文件,图片文件,甚至是 LESS 文件打包,每一个文件都是一个独立的模块,并且实现按需加载。使用时需要安装 webpackwebpack-cli 、...
  • 刚使用webpack4来构建Vue2的项目环境就遇到了一些内置插件失效和环境依赖库的更新的坑。 webpack4中环境及依赖库的部分版本要求 loader 最低版本要求 功能说明 vue-loader 15.0.0 解析、编译vue单文件...
  • 前端 Webpack 工程化的最佳实践

    千次阅读 2020-03-11 00:37:34
    作者 |阿里文娱前端开发专家芃苏责编 | 屠敏头图 | CSDN 下载自视觉中国引言▐前端构建工具的演变回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task ...
  • 四.webpack自动生成项目中的HTML文件

    千次阅读 2018-05-07 16:35:08
    webpack自动生成项目中的HTML文件 ... 安装插件 npm install html-webpack-plugin ...安装完成需要在webpack.config.js中引用并且初始化插件,具体的可以查看 API: http://webpack.github.io/docs/using-plugi...
  • 前端面经-webpack

    千次阅读 2017-11-30 20:32:20
    1.webpack是一个模块打包工具,使用webpack管理你的模块依赖,并编译输出她们所需要的静态文件,它能够很好地管理、打包web开发中所用到的html、css、js及各种静态文件,让开发过程更加高效。 2.webpack的两大特色...
  • webpack介绍、配置、使用

    千次阅读 2017-12-06 17:43:28
    webpack使用
  • vue

    千次阅读 2020-05-29 10:42:08
    vue init webpack sell (vue build选简化版,vuejs的大小可以减小6kb,依赖.vue文件开发) cd sell npm install npm run dev 如有需要 npm install less less-loader –save-dev 》》》》
  • 在生产环境中,我们应该尽量减小JS文件大小,将框架性的JS装载在一个文件中利用浏览器的缓存机制节约加载资源耗费时间 分块思路 1、react,react-dom这种由第三方维护的框架,一般不会进行更新。(真要更新就...
1 2 3 4 5 ... 20
收藏数 1,426
精华内容 570
关键字:

webpack 减小编译后的文件大小