vue-cli配置預編譯

KnewOne 發布于2019-08-22 18:13 / 2556人閱讀

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

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

build

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

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]", // 當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與DllPlugin的name參數保持一致
  },
  entry: {
      //直接引用package里面的
    lib: Object.keys(package.dependencies),
    //也可以手動配置
    lib:[
        "jquery",
        "vue",
        "vue-router",
        "swiper"
    ]
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, outputPath, "[name]-manifest.json"), // 本Dll文件中各模塊的索引，供DllReferencePlugin讀取使用
      name: "[name]_[hash:6]",  // 當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與參數output.library保持一致
      context: __dirname, // 指定一個路徑作為上下文環境，需要與DllReferencePlugin的context參數保持一致，建議統一設置為項目根目錄
    }),
    new ExtractTextPlugin("[name].css"),
    /*全局庫綁定不在此處配置
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery",
    }),*/
  ],
  
};

webpack.base.conf.js文件配置,在開發或打包時能引用或避開預編譯下的內容

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里加上我們的預編譯包

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === "testing"
        ? "index.html"
        : config.build.index,
      template: "index.html",
      //在index.html里面引用這個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的結束標簽前加上

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

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

預編譯

項目根目錄下運行npm run dll，就會在static目錄下發現dll這個文件夾，里面就是預編譯的包和預編譯的引用json。

項目地址： https://github.com/JhonMr/pre...

原創文章,轉載請注明出處 https://www.jianshu.com/p/156...

云服務器 GPU云服務器預編譯階段模板預編譯 webrtc預編譯預編譯頭文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95631.html

基于vue-cli的webpack配置優化

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

caohaoyu 2019-08-21 17:15 評論0 收藏0
vue-cli3 搭建的前端項目基礎模板

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

william 2019-08-26 12:24 評論0 收藏0
vue-cli3.0初體驗～

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

AlphaWallet 2019-08-22 15:57 評論0 收藏0
（小白篇）vue-cli3.0創建項目+引入element-ui

摘要：在年月份發布了版本，經過重構之后，可以說是一個船心版本在項目都落地之后，就想升級一下版本，嘗一嘗帶來的舒適，也是為后面項目的開展做一個準備。選了之后會詢問是否開啟模式，以及選擇預處理器，這里根據個人情況選用。 vue-cli在2018年8月份發布了3.0版本，經過重構之后，可以說是一個船心版本！在項目都落地之后，就想升級一下cli版本，嘗一嘗3.0帶來的舒適，也是為后面項目的開展做一個...

avwu 2019-08-23 16:43 評論0 收藏0