本文目录
如何解决webpack打包后，dist文件过大的问题
去除不必要的插件刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。提取第三方库像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置{entry: {bundle: ’app’vendor: }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: }加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。另外，服务器端还可以开启 gzip 压缩，优化的效果更明显。代码分割什么是代码分割呢？我们知道，一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说，我们更想要的是只加载当前 UI 的代码，没有点击的部分不加载。看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。code split 是不支持 ES6 的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用 ES6 的方式，这时候不管导入是用 CommomJs 还是 AMD，都会失败，而且还不会报错！当然会踩到这个坑也是因为我刚刚才用 NodeJS，而且一入门就是用 ES6 的风格。除了这个之外，还有一点也要注意，在生产环境的 webpack 配置文件中，要加上 publicPathoutput: {path: xxx,publicPath: yyy,filename: ’bundle.js’}不然的话，webpack 在加载 chunk 的时候，路径会出错。设置缓存开始这个小节之前，可以先看下大神的一篇文章：大公司里怎样开发和部署前端代码。对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。那如果缓存设置过长，文件要更新怎么办呢？嗯，以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现output: {path: xxx,publicPath: yyy,filename: ’.js’}打包后的文件名加入了 hash 值const bundler = webpack(config)bundler.run((err, stats) =》 {let assets = stats.toJson().assetslet namefor (let i = 0; i 《 assets.length; i++) {if (assets.name.startsWith(’main’)) {name = assets.namebreak}}fs.stat(config.buildTemplatePath, (err, stats) =》 {if (err) {fs.mkdirSync(config.buildTemplatePath)}writeTemplate(name)})})手动调用 webpack 的 API，获取打包后的文件名，通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。
vue 开启gzip ,nginx 配置gzip
1 在vue.config.js 里面引入’compression-webpack-plugin’ 3、打包npm run build 后目标文件里出现 gz 压缩文件即成功 访问 网站，出现一下标志，证明nginx 配置成功
django使用gzip实现数据压缩
当使用前后端分离开发项目时，如果前端使用vue react等框架进行开发时，往往项目中的js文件很大，即使使用webpack打包之后，少则几百k多则几mb。如果不将数据进行压缩传输，将会大大增加用户加载页面的等待时间。同时在使用ajax交互数据的同时，json数据往往也会达到几百k。使用django可以轻松将 通过接口请求的数据 进行gzip压缩。大大提升用户的体验。
要使通过django处理的请求都进行压缩，可以使用全局配置
如果想控制某个接口进行压缩，可以使用gzip_page进行配置
nginx使用GZIP***隐藏网址***
vue-codemirror代码格式化后,怎样压缩代码
具体操作步骤如下：1、设置productionSourceMap为false。如果不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。设置为false打包时候不会出现.map文件。2、代码压缩。安装uglifyjs-webpack-plugin插件，可以去除项目中console.log和debugger。3、图片资源压缩。安装 image-webpack-loader 插件，可以将大图片进行压缩从而缩小打包体积。4、开启gzip压缩。
