国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-cli配置預(yù)編譯

KnewOne / 2560人閱讀

摘要：轉(zhuǎn)載文章公司的平臺(tái)功能越堆越多，打包也越來越費(fèi)勁，一次十幾分鐘，運(yùn)維很不爽，搗鼓了一下預(yù)編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現(xiàn)在把它記下來，給需要的童鞋當(dāng)做參考，也給自己記錄一下。

(轉(zhuǎn)載文章)
公司的平臺(tái)功能越堆越多，打包也越來越費(fèi)勁，一次十幾分鐘，運(yùn)維很不爽，so搗鼓了一下預(yù)編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現(xiàn)在把它記下來，給需要的童鞋當(dāng)做參考，也給自己記錄一下。
項(xiàng)目目錄

build

webpack.dll.conf.js(我們自己新建的預(yù)編譯配置)

webpack.base.config.js

webpack.prod.conf.js

....

static

package.json

新建文件webpack.dll.conf.js
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
var package = require("../package.json")
var outputPath = "../static/dll"

module.exports = {
  output: {
    path: path.join(__dirname, outputPath),
    filename: "dll.[name]_[hash:6].js",
    library: "[name]_[hash:6]", // 當(dāng)前Dll的所有內(nèi)容都會(huì)存放在這個(gè)參數(shù)指定變量名的一個(gè)全局變量下，注意與DllPlugin的name參數(shù)保持一致
  },
  entry: {
      //直接引用package里面的
    lib: Object.keys(package.dependencies),
    //也可以手動(dòng)配置
    lib:[
        "jquery",
        "vue",
        "vue-router",
        "swiper"
    ]
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, outputPath, "[name]-manifest.json"), // 本Dll文件中各模塊的索引，供DllReferencePlugin讀取使用
      name: "[name]_[hash:6]",  // 當(dāng)前Dll的所有內(nèi)容都會(huì)存放在這個(gè)參數(shù)指定變量名的一個(gè)全局變量下，注意與參數(shù)output.library保持一致
      context: __dirname, // 指定一個(gè)路徑作為上下文環(huán)境，需要與DllReferencePlugin的context參數(shù)保持一致，建議統(tǒng)一設(shè)置為項(xiàng)目根目錄
    }),
    new ExtractTextPlugin("[name].css"),
    /*全局庫綁定不在此處配置
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery",
    }),*/
  ],
  
};
webpack.base.conf.js文件配置,在開發(fā)或打包時(shí)能引用或避開預(yù)編譯下的內(nèi)容
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const manifest = require("../static/dll/lib-manifest.json")

添加插件配置

plugins: [
   //自定義dll
    new webpack.DllReferencePlugin({
        context: __dirname+"/static/dll",
        manifest: manifest,
        dll:`${manifest.name}.js`,
    }),
    //全局庫綁定
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery",
    }),
],
在webpack.prod.conf.js文件配置打包
var manifest = require("../static/dll/lib-manifest.json")

在HtmlWebpackPlugin配置里添加dll
的引用，以便在index.html里加上我們的預(yù)編譯包

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === "testing"
        ? "index.html"
        : config.build.index,
      template: "index.html",
      //在index.html里面引用這個(gè)dll
      dll:`/static/dll/dll.${manifest.name}.js`,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency"
    }),
根目錄下的 index.html，body的結(jié)束標(biāo)簽前加上

最后一步在package.json里邊添加上預(yù)編譯命令，srcipt里邊加上一行：

//預(yù)編譯命令
"dll": "webpack --progress --colors --config build/webpack.dll.conf.js",
預(yù)編譯

項(xiàng)目根目錄下運(yùn)行npm run dll，就會(huì)在static目錄下發(fā)現(xiàn)dll這個(gè)文件夾，里面就是預(yù)編譯的包和預(yù)編譯的引用json。

項(xiàng)目地址： https://github.com/JhonMr/pre...

原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處 https://www.jianshu.com/p/156...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95631.html

相關(guān)文章

  • 基于vue-cli的webpack配置優(yōu)化

    摘要：使用打包的基本上都是獨(dú)立庫文件，這類文件有一個(gè)特性就是變化不大。修改往添加一個(gè)配置只針對(duì)的模塊化有效配置文件詳情請(qǐng)點(diǎn)擊 基于vue-cli優(yōu)化的webpack配置 大概分為以下幾點(diǎn) 通過 externals 配置來提取常用庫，引用外鏈 配置CommonsChunkPlugin提取公用代碼 （vue-cli已做） 善用alias（vue-cli配置了一部分） 啟用DllPlugin和D...

    caohaoyu 評(píng)論0 收藏0

  • vue-cli3 搭建的前端項(xiàng)目基礎(chǔ)模板

    摘要：基于搭建的前端模板，本倉庫，即可搭建完成一個(gè)新項(xiàng)目的基礎(chǔ)模板，源碼地址，歡迎或特性預(yù)編譯語言，做了一定的封裝，詳見雪碧圖移動(dòng)的適配方案引入了及，可以自由地用去開發(fā)常用的工具類引用全局注入相關(guān)的文件，如通用的及等常用的的集合支持 基于 vue-cli3 搭建的前端模板，clone 本倉庫，即可搭建完成一個(gè)新項(xiàng)目的基礎(chǔ)模板，源碼地址，歡迎 star 或 fork 特性 CSS 預(yù)編譯語言...

    william 評(píng)論0 收藏0

  • vue-cli3.0初體驗(yàn)～

    摘要：比如傳遞給時(shí)，使用。為所有的及其預(yù)處理文件開啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會(huì)默認(rèn)開啟。是否使用分割供應(yīng)的包也可以是一個(gè)在包中引入的依賴的顯性的數(shù)組。查閱配置行為。 之前因?yàn)閜arcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級(jí)到webpack4，并增加許多新特性 安裝并創(chuàng)建一個(gè)項(xiàng)目 支持npm和yarn npm install -g @v...

    AlphaWallet 評(píng)論0 收藏0

  • （小白篇）vue-cli3.0創(chuàng)建項(xiàng)目+引入element-ui

    摘要：在年月份發(fā)布了版本，經(jīng)過重構(gòu)之后，可以說是一個(gè)船心版本在項(xiàng)目都落地之后，就想升級(jí)一下版本，嘗一嘗帶來的舒適，也是為后面項(xiàng)目的開展做一個(gè)準(zhǔn)備。選了之后會(huì)詢問是否開啟模式，以及選擇預(yù)處理器，這里根據(jù)個(gè)人情況選用。 vue-cli在2018年8月份發(fā)布了3.0版本，經(jīng)過重構(gòu)之后，可以說是一個(gè)船心版本！在項(xiàng)目都落地之后，就想升級(jí)一下cli版本，嘗一嘗3.0帶來的舒適，也是為后面項(xiàng)目的開展做一個(gè)...

    avwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<