webpack打包優化插件(三)

webpack打包優化

• webpack打包(理解優化的思路以及如何尋找解決辦法)

在生產階段，使用 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，發現加載比較慢   

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的 包已安裝, 部分需配置

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, //去除空格
       }
     }),

使用 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')