webpack_0">webpack打包优化

• webpack打包(理解优化的思路以及如何寻找解决办法)

webpack__4">在生产阶段，使用 webpack 打包

1、先重新创建一个生产阶段用的webpack.config.prod.js配置文件
   	注意：该配置文件，就是在开发阶段的基础上，添加一些针对生产环境的配置（比如output）
  	
  2、在package.json中，在scripts中增加一个配置
  	"build":"webpack --progress --config webpack.config.prod.js"
  	
  3、在根目录下运行 npm run build 即可
  
  4、打包完毕之后，在当前目录下生成了一个index.html好bundle.js
  	生成好的index.html中会自动导入bundle.js
  
  5、我们接下来运行index.html，发现加载比较慢	

webpackbundlejs_22">webpack打包时候的优化之压缩bundle.js

---

优化之压缩bundle.js

1、先把项目的代码 从es6 转成 es5
   	参考:https://babeljs.io/docs/setup/#installation
   	中文参考地址:https://babeljs.cn/docs/setup/#installation
   	
   	1.1、安装三个包
   		npm i babel-core babel-loader babel-preset-env -D
   	
   	1.2、在webpack.config.prod.js中配置
   		{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
   		
   	1.3、在当前目录下，创建一个.babelrc，增加对预设的处理
   		"presets": ["env"]
   
 2、在webpack.config.prod.js的plugins写上压缩相关的代码
  	参考:https://cn.vuejs.org/v2/guide/deployment.html
  	
  	new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      })
      
      new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false, //去掉警告
            drop_debugger: true,
            drop_console: true //去除console.log
          },
          comments: false //去掉版权信息等注释
      })
      
  // 如果是 vue-cli的 包已安装, 部分需配置

webpackhtml_63">webpack打包之压缩html

 此插件 打包时，会以参照文件 在dist目录生成index.html 、 bundle.js(在index自动引入文件)
 
 参考:https://github.com/jantimon/html-webpack-plugin
 	https://github.com/kangax/html-minifier#options-quick-reference
 	
 1. 安装
 	npm i html-webpack-plugin -D
     
 2. 在webpack.config.prod.js中配置一下
 	const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 3. plugins配置
 	//生成index.html
     new HtmlWebpackPlugin({
       template: './template.html', //参照文件的路径
       filename: 'index.html', //最后发布到node服务器上面的名称
       minify: {
         removeComments: true, //压缩注释
         minifyJS: true, //压缩js
         minifyCSS: true, //压缩css
         collapseWhitespace: true, //去除空格
       }
     }),

webpackplugin_dist_91">使用 clean-webpack-plugin 在每次打包之前，删除上一次的dist目录

 1、安装
   	npm i clean-webpack-plugin -D
   	
 2、在webpack.config.prod.js中配置一下
  	2.1、导入
  		var CleanWebpackPlugin = require('clean-webpack-plugin')
  		
  	2.2、在我们的plugins中配置一下即可
       	new CleanWebpackPlugin('dist'),

项目中用到的第三方样式，从bundle.js中剥离出去

步骤：
	1、安装包 
    	npm i extract-text-webpack-plugin -D
	
	2、导入 extract-text-webpack-plugin
	
	3、在webpack.config.prod.js的module更改原先css的配置
    	{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: {
                  loader:"css-loader",
                  options: {
                      minimize: true //压缩抽离出去的css
                  }
              }
            })
	    }
	4、在plugins中写代码
		new ExtractTextPlugin("styles.css"),
		
	5、如果要压缩css
		搜索 minimize

静态资源(图片、字体等)从bundle.js中剥离出去

   参考:https://doc.webpack-china.org/loaders/url-loader
   
   对我们url-loader进行额外的配置options中配置 limit、name
   	{
           test: /\.(png|jpg|gif|svg|ttf|woff|eot)$/,
           loader: 'file-loader',
           options: {
             limit: 4000, //这个代表阀值，根据需要改变(限制多大需要从bundle.js抽离)
             // 从bundle.js中抽离出去之后 放在dis目录
             name: 'static/[name].[ext]?[hash:5]'
             // name: 'static/[name]-[hash:5].[ext]' 
           }
         }
   
    哈希算法：任何文件，经过hash运算(md5)，可以得到一个32位定长的字符串，

vue-lazyload的加载的问题解决

   参考:https://segmentfault.com/q/1010000009724885
    需要以模块化方式，去加载 require
    
    Vue.use(VueLazyload, {
      // loading:'src/statics/site/images/01.gif'
      loading: require('./statics/site/images/01.gif'),
    })

第三方包从bundle.js中抽离出去

注意点：
1、按需加载的包，就不要单独抽取出来了，否则会很大

步骤:
1、entry，改成多入口
	见代码 webpack.config.prod.js中的entry
       
       // 当需要把第三方包独立打包时，用多入口
       entry: {
         'axios': ['axios'], //属性名代表 打包出来文件名， 值是：第三方包名称
         'jquery': ['jquery'],
         'moment': ['moment'],
         'v-distpicker': ['v-distpicker'],
         'vue-lazyload': ['vue-lazyload'],
         'vueCore': ['vue', 'vue-router', 'vuex'],
         'bundle': './src/main.js'
       },
 

2、更改output，改成多出口
	filename: 'js/[name].js'
       
       output: {
         	path: path.resolve(__dirname, './dist'),
           publicPath: '/dist/',
           // filename: 'build.js' // (开发环境)
           filename: 'js/[name].js'
       },

3、在plugins中配置

iview按需加载，实现element的按需加载

1、不要在webpack.config.prod.js中，对element-ui 进行单独抽离打包

2、在我们项目中，按需加载element-ui
参考:http://element.eleme.io/#/zh-CN/component/quickstart

2.1、安装包
		npm i babel-plugin-component -D
	 
2.2、在.babelrc中，配置按需导入我们的element的代码

2.3、在main.js中，用到element的哪些组件，我们就按需导入哪些组件，并且如果我们调用了Vue.use(组件)，它就会自动帮我们导入该组件对应的样式
   
   //使用Vue.use()会自动导入 node_modules\element-ui\lib\theme-chalk\Carousel.css 对应样式, 无需再引入 css样式
Vue.use(Carousel); 

实现vue路由的懒加载

 // 首屏 按需加载  提高效率
  参考:https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

  步骤:
  	1、安装包并且在.babelrc中配置 
  		npm i babel-plugin-syntax-dynamic-import -D
  		
  	2、在导入我们组件的时候，按照懒加载的形式去写
  		const Foo = () => import('./Foo.vue')