鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ ElemntUI使用DllPlugin打包后Tooltip不生效

ElemntUI使用DllPlugin打包后Tooltip不生效

在使用Vue開發(fā)項(xiàng)目的過程中, 發(fā)現(xiàn)項(xiàng)目打包比較慢, 于是使用DllPlugin進(jìn)行預(yù)打包
參考方案: https://juejin.im/entry/598bc...
將依賴庫打包成dll來引用

打包完成之后在index.html中引入dll, 發(fā)現(xiàn)其他庫運(yùn)行正常, 包括ElementUI的其他組件也運(yùn)行正常, 但是Tooltip組件卻不起作用.

如果不打包ElementUI到Dll中, Tooltip 是可以正常使用的

有朋友遇到過這個(gè)情況么, 或者說有人知道為什么會(huì)這樣么?

打包配置代碼如下:

  • webpack.dll.conf.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
// 如果把 element-ui 從數(shù)組中移除的話, Tooltip 組件能夠正常使用
    vendor: ['vue/dist/vue.esm.js', 'vue-router','vuex', 'axios', 'underscore'],
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js中暴露出的全局變量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: path.resolve(__dirname, '..')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

  • webpack.base.conf.js

var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
    entry: {...},
    output:{...},
    resolve: {...},
    module: {...},
    plugins: [
    new webpack.DllReferencePlugin({
        context: path.resolve(__dirname, '..'),
        manifest: require('./vendor-manifest.json')
    }),
  ]
}

  • index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
  </body>
</html>
回答
編輯回答
初心

你打包的dll文件里面是不是有兩個(gè)vue模塊，如果是有兩個(gè)vue模塊那就是webpack.dll.conf.js的配置文件有問題

const path    = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const libraryName = 'vendor_lib'
let config = {
    entry: {
        vendor: ['vue/dist/vue.esm.js', 'vue-router','element-ui','axios']
    },
    output: {
        path: path.join(__dirname, '../static/js'),
        filename: '[name].dll.js',
        library: libraryName
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '../', '[name]-manifest.json'),
            name: libraryName,
            context: __dirname,
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false
              }
            },
            sourceMap: true,
            parallel: true
        }),
        // new CompressionWebpackPlugin({
        //     asset: '[path].gz[query]',
        //     algorithm: 'gzip',
        //     test: /\.(js|css)$/,
        //     threshold: 10240,
        //     minRatio: 0.8
        // })
    ]
};
if(process.env.npm_config_report){
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    config.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = config;

用這份配置文件打包看下問題還存不存在，指定vue的版本（vue/dist/vue.esm.js）和打包的環(huán)境

//設(shè)置打包環(huán)境
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    }
}),
2017年5月1日 09:00
編輯回答
涼心人

我也出現(xiàn)這樣的問題 坐等解答!

2017年7月28日 04:23
編輯回答
怪痞

我也遇到這個(gè)問題。
思路1，將css也放入dll打包中，失敗。
思路2，將css放入index.html中，不合理，需要拷貝element的css文件到靜態(tài)文件夾中，或者通過cdn引用，反正不合理。
思路3，將element-ui不放入dll打包中，成功。

分析原因，必須先加載element-ui，隨后加載index.css el-tooltip才有效。而tooltop是相對(duì)于body定位的，等我研究出方案或者原理，再來回答這個(gè)答案，先占一個(gè)坑

2018年3月14日 05:50
編輯回答
久不遇

謝邀，這種問題只能去給官方提issue

2018年9月3日 17:56