ElemntUI使用DllPlugin打包后Tooltip不生效

在使用Vue开发项目的过程中, 发现项目打包比较慢, 于是使用DllPlugin进行预打包
参考方案: https://juejin.im/entry/598bc…
将依赖库打包成dll来引用

打包完成之后在index.html中引入dll, 发现其他库运行正常, 包括ElementUI的其他组件也运行正常, 但是Tooltip组件却不起作用.

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

有朋友遇到过这个情况么, 或者说有人知道为什么会这样么?

打包配置代码如下:

  • webpack.dll.conf.js

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

module.exports = {
  entry: {
// 如果把 element-ui 从数组中移除的话, 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>

回答:

我也出现这样的问题 坐等解答!

回答:

https://github.com/ElemeFE/el…
按楼主提的issue里,统一工程中的alias配置vue$解决。

webpack.dll.conf.jsvue.config.js 或者 webpack.base.config.js 等保持上一致。

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },

回答:

我也遇到这个问题。
思路1,将css也放入dll打包中,失败。
思路2,将css放入index.html中,不合理,需要拷贝element的css文件到静态文件夹中,或者通过cdn引用,反正不合理。
思路3,将element-ui不放入dll打包中,成功。

分析原因,必须先加载element-ui,随后加载index.css el-tooltip才有效。而tooltop是相对于body定位的,等我研究出方案或者原理,再来回答这个答案,先占一个坑

回答:

你打包的dll文件里面是不是有两个vue模块,如果是有两个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)和打包的环境

//设置打包环境
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    }
}),

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注